d3.js

Sorting method in d3js not working

由 时光毁灭记忆、已成空白 提交于 2020-01-06 06:48:06
问题 In this bar chart you can sort by clicking the "sort values" checkbox, it works initialy, but if you try to uncheck the box again it stops working. I get no errors from this either, I suspect that it has something to do with data not being loaded properly or some part of my code is structured poorly. Here's a Plunker 回答1: The reason for the unchecking of the sort values to NOT work was the sortIndex . As the data was being sorted, the original data itself was manipulated and the new sortIndex

D3 js - is it possible to draw straight lines between tree nodes?

由 老子叫甜甜 提交于 2020-01-06 06:30:09
问题 I have created a horizontal tree diagram as shown in below image. I want straight lines between nodes. The curved lines between nodes are default in d3 js. I saw some answers on google for this but did not found any satisfactory result. So is it possible to draw straight lines between nodes in d3 js? If yes then how can I do that? enter image description here <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity

Javascript d3 insert image from local file

由 巧了我就是萌 提交于 2020-01-06 06:00:41
问题 Update : I changed the last two lines to the following. .append('img') .attr('src','images/testimage.png') But the image is not appearing. There is a broken image in its place so I believe either the file path syntax is incorrect or there's something else I'm not seeing. Original Post I'm having trouble rendering an image stored in my local directory via js. The last 2-3 lines of code is where the issue is. I'm not 100% sure if that's the correct notation for the file path (I think it is

d3 liquid chart bugs - clipping path jarring

由 不打扰是莪最后的温柔 提交于 2020-01-06 05:35:06
问题 I am trying to stabilize this d3js liquid rectangle shape code. I am testing it with different dimensions but the configuration isn't holding - like its always being displaced. -- this variant has a switch between a rect/circle gauge http://jsfiddle.net/0ht35rpb/132/ this tweak has configured the clipping path accordingly fillGroup.append("rect") .attr("x", config.width - 5 + config.margin) .attr("y", config.margin) .attr("width", config.width - 2 * config.margin) .attr("height", config

D3.js error using timescale (path is NaN)

由 霸气de小男生 提交于 2020-01-06 05:34:05
问题 Im using d3.js to make a heatmap. My data is an object out of which i have pulled out the maximum and minimum year. When i use d3.timeScale() to initialise my x axis, im getting an error with all my years rendering on the same position of x ( this is due to the following errors on the console) d3.min.js:2 Error: <path> attribute d: Expected number, "MNaN,6V0.5HNaNV6". (anonymous) @ d3.min.js:2 13d3.min.js:2 Error: <g> attribute transform: Expected number, "translate(NaN,0)". Some of the code

Clip path is moving with group of elements when using d3.drag

由 心已入冬 提交于 2020-01-06 05:29:12
问题 I'm trying to drag a group of shapes on a clipped path. For the first time, It works fine, but as soon as I started dragging, clipping does not work at all. Here is my working code; var svg = d3.select("svg"); // draw a circle svg.append("clipPath") // define a clip path .attr("id", "clip") // give the clipPath an ID .append("circle") // shape it as an ellipse .attr("cx", 100) // position the x-centre .attr("cy", 80) // position the y-centre .attr("r", 80) // set the x radius .attr("fill",

nvd3 multibarchart last bar is hidden not visible

由 依然范特西╮ 提交于 2020-01-06 05:08:23
问题 Based on this stackoverflow answer I was trying to copy essential parts to get proper scale for timeline. I use multibarcharts for multible graphs, from few records to hundreds with X-axis having data from 1930 to today. I've copied it like this, but I have two issues: Last bar is always outside of graph bars overlap, which I can partly fix by altering numTicks , but isn't there a better way? <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf

Error: <path> attribute d: Expected number, “….43564672524005LNaN,NaNZ”

由 本小妞迷上赌 提交于 2020-01-06 05:08:09
问题 I tried to get running circosJS but I got the following errors with my data: 1 "datum" "unknown parent id" {line: 1, value: undefined, header: "sourceId", layoutSummary: {…}} circos.js:19573 1 "datum" "unknown parent id" {line: 2, value: undefined, header: "sourceId", layoutSummary: {…}} circos.js:19573 1 "datum" "unknown parent id" {line: 3, value: undefined, header: "sourceId", layoutSummary: {…}} circos.js:19573 1 "datum" "unknown parent id" {line: 4, value: undefined, header: "sourceId",

Can I use Javascript to get a file directory list?

由 倾然丶 夕夏残阳落幕 提交于 2020-01-06 03:37:07
问题 I'm using client-side Javascript and want to get a list of all the files in a folder that I believe is hosted on the same server as my .html file. I'm very unfamiliar with the terminology so I apologize in advance if I'm inaccurate or just plain wrong. I currently use d3.text("js/data/nodes#.csv", "text/csv", someFunction) to load in a data file to work with. I figure that since all the filenames I want are templated the same way, I can hack a solution by looping through all possible numbers

Can I move one data series down to a lower x axis, programmatically?

由 ￡可爱￡侵袭症＋ 提交于 2020-01-06 03:00:28
问题 I have a d3 stacked column chart that I'm very happy with. The full code is in a JS Fiddle. What I'd like to do is lop the last data series off, and set it on its own axis, but ensure that it maintains the same scale. So if this is my data: var dataset = [ // apples [{"x": 1, "y": 5 }, { "x": 2, "y": 4 }, { "x": 3, "y": 2 }, { "x": 4, "y": 7 }, { "x": 5, "y": 23 }], // oranges [{ "x": 1, "y": 10 }, { "x": 2, "y": 12 }, { "x": 3, "y": 19 }, { "x": 4, "y": 23 }, { "x": 5, "y": 17 }], // grapes
订阅 d3.js