d3.js

问题 I'm creating a dummy JSON value and is trying to show them but the problem is i keep getting this error: My code snippet is below: var jsonData = '[{"id":"31370100","machine_name":"GUMACA BRANCH CAM","machine_type":"CAM","operation_start":"05:04:33","operation_end":"09:04:33"}]' d3.json(jsonData).then((data)=>{ console.log(data); }); 回答1: d3.json takes a URL as the parameter. As you have the JSON already, you probably just need JSON.parse(), and there is no need to use d3 in this instance. So

问题 My Chart is going out of the box, If you notice last circle is cutting and going out of the described width, I have tried to give transform but it's not looking good, scatter .append("path") .datum(data) .attr("class", "line") .attr("transform", "translate(50,0)") .attr("d", line); scatter .selectAll(".foo") .data(data) .enter() .append("circle") .attr("class", "foo") .attr("transform", "translate(50,0)") .attr("cx", function(d) { return xScale(d.startTime); }) I tried to give .attr(

问题 In my d3 chart, Zoom selection disappears when I change the brush and click on not selected range. This is my working code - https://codesandbox.io/s/eager-shirley-cxq99 When I changed the selection above and clicked on unselected selection zoom selection disappear. Please guide me what is wrong with my code. 回答1: Just un-comment this part in your code to actually produce the zoom rect, which gets used in the brushed function. svg .append("rect") .attr("class", "zoom") .attr("width",

问题 In my d3 chart, Zoom selection disappears when I change the brush and click on not selected range. This is my working code - https://codesandbox.io/s/eager-shirley-cxq99 When I changed the selection above and clicked on unselected selection zoom selection disappear. Please guide me what is wrong with my code. 回答1: Just un-comment this part in your code to actually produce the zoom rect, which gets used in the brushed function. svg .append("rect") .attr("class", "zoom") .attr("width",

问题 I would like to create a force directed graph, but i need it to stay the same every time it is generated (with the same data). Is there any way to do this using d3.js? UPDATE: I found working solution, which is based on using seeded random number generator // set the random seed Math.seedrandom('mySeed'); 回答1: You could by modifying D3's force layout, or by creating your own layout based on it. There are at least 3 places where randomness (Math.Random) is used in the positioning of nodes

问题 JSBin of my example with code I have a line chart of two variables on separate axes: The .csv file has missing values at the beginning and end for the blue series ('close'): date,open,close 1-May-89,161, 1-May-90,170, 1-May-91,137, 1-May-92,144,91.9 1-May-93,91,91.8 (...) 1-May-11,12,75.7 1-May-12,7,68.2 1-May-13,15, The missing value at the end is handled properly (the line is truncated), but the first three are treated as zero values. How can I have the blue, 'close' series start at 1992?

问题 I wrote some code that uses a drag event for svg elements. The code works fine and I would like to write some tests for it. Instead of manually moving my mouse by hand I would like to programmatically trigger the dragstart and drag events with selection.dispatch: svgSelection.dispatch('dragstart',{bubbles:true}); svgSelection.dispatch('drag',{bubbles:true}); However, the events do not seem to be fired. Maybe I use the wrong event keys or need to include some additional option? I also tried to

问题 Say I have a sample file sample.csv: row,col,value 1,1,2 1,2,3 1,3,NA When reading data in d3 you do something like: d3.csv("sample.csv", function(data) { data.forEach(function(d) { d.value = +d.value; }); However, for the NA value +d.value will return NaN. How can I exclude NaN values from my data. i.e. read the data, and only take rows which have a number value Thanks! 回答1: You can call isNaN on the data before you try to add it: d3.csv('sample.csv', function(data) { data = data.filter

问题 Say I have a sample file sample.csv: row,col,value 1,1,2 1,2,3 1,3,NA When reading data in d3 you do something like: d3.csv("sample.csv", function(data) { data.forEach(function(d) { d.value = +d.value; }); However, for the NA value +d.value will return NaN. How can I exclude NaN values from my data. i.e. read the data, and only take rows which have a number value Thanks! 回答1: You can call isNaN on the data before you try to add it: d3.csv('sample.csv', function(data) { data = data.filter

问题 I am attempting to draw a pie chart using the d3.js library and TypeScript. I have the following code: "use strict"; module Chart { export class chart { private chart: d3.Selection<string>; private width: number; private height: number; private radius: number; private donutWidth: number; private dataset: { label: string, count: number }[]; private color: d3.scale.Ordinal<string, string>; constructor(container: any) { this.width = 360; this.height = 360; this.radius = Math.min(this.width, this