d3.js

问题 Mike Bostock uses the following snippet to generate uniformly-spaced bins for a histogram: var data = d3.layout.histogram() .bins(x.ticks(20)) (values); source Is there any way to adapt this to a project that uses dc.js and crossfilter.js? Essentially, I want to dynamically generate the bins and then use the chart to filter on a particular attribute. Total newbie to this. Any guidance would be appreciated! 回答1: dc.js supports histograms via crossfilter. Use a group for your bar chart that

问题 In my D3 line chart, i´m trying to create a mouseover effect like in this example: http://bl.ocks.org/mbostock/3902569 In this example the author uses the bisector function, which is, as far as i understand, only supported for linear scales. The problem is, that in my chart i have an ordinal x axis with different, discrete rangePoint tuples. So if it is like in the situation below (m = mouse position), i want to get the pixel position of the closest x value which would be x2 in this example.

问题 I'm drawing line charts with d3 and it all works fine. However, I have to leave enough margin on the left of the chart area to fit whatever I think might be the widest y-axis text label. I'd like to adjust this space for each chart, depending on the widest label. Initially I thought I could find the maximum y value, create a hidden text object, work out how wide that is, and use that value for the left margin when creating the chart. A bit nasty, but it gets me a value. However, if the

问题 I'm drawing line charts with d3 and it all works fine. However, I have to leave enough margin on the left of the chart area to fit whatever I think might be the widest y-axis text label. I'd like to adjust this space for each chart, depending on the widest label. Initially I thought I could find the maximum y value, create a hidden text object, work out how wide that is, and use that value for the left margin when creating the chart. A bit nasty, but it gets me a value. However, if the

问题 I have made a tree graph structure and it's working absolutely fine. But now I want to make a small change but unable to make that change. I want to connect the two-parent node into one child node...also I am trying to add a tooltip into each node pragmatically. For example - if you run the code, you will see it more clearly. I wanna make a child node of Hanna and mark which will be connected to a child node named "Eric". any idea how to achieve this? var svg = d3 .select("body") .append("svg

问题 I have made a tree graph structure and it's working absolutely fine. But now I want to make a small change but unable to make that change. I want to connect the two-parent node into one child node...also I am trying to add a tooltip into each node pragmatically. For example - if you run the code, you will see it more clearly. I wanna make a child node of Hanna and mark which will be connected to a child node named "Eric". any idea how to achieve this? var svg = d3 .select("body") .append("svg

问题 I have made a tree graph structure and it's working absolutely fine. But now I want to make a small change but unable to make that change. I want to connect the two-parent node into one child node...also I am trying to add a tooltip into each node pragmatically. For example - if you run the code, you will see it more clearly. I wanna make a child node of Hanna and mark which will be connected to a child node named "Eric". any idea how to achieve this? var svg = d3 .select("body") .append("svg

问题 Below code represents a flow chart with connecting links that was built using D3.js Things work fine, but one issue I am seeing is with the links , right now the links are drawn first and then the nodes are transitioned/animated to their respective positions. How can I have both links and nodes transition to their positions simultaneously ( smoothly ) ? var margin = { top: 20, right: 120, bottom: 20, left: 120, }, width = 960 - margin.right - margin.left, height = 800 - margin.top - margin

问题 I am trying to append 'g' in random locations within an svg. Below is my code. Surprisingly, all the 10 'g's are being drawn on the same position. I specified random position in line 5 but all g got the same x and y. What am I doing wrong? const art = svg.selectAll('g') .data(d3.range(10)) .enter() .append('g') .attr("transform", `translate(${d3.randomInt(padding, width-padding)()},${d3.randomInt(padding, height-padding)()})`) //this line .selectAll('snowflake') .data(d3.range(6)) .enter()

问题 I am trying to append 'g' in random locations within an svg. Below is my code. Surprisingly, all the 10 'g's are being drawn on the same position. I specified random position in line 5 but all g got the same x and y. What am I doing wrong? const art = svg.selectAll('g') .data(d3.range(10)) .enter() .append('g') .attr("transform", `translate(${d3.randomInt(padding, width-padding)()},${d3.randomInt(padding, height-padding)()})`) //this line .selectAll('snowflake') .data(d3.range(6)) .enter()