You need to bind data to the nodes (rectangles and text elements) that make up the legend. Currently you get an error when trying to style rectangles: Uncaught TypeError: Cannot read property ‘1’ of undefined The reason: there’s no bound data legend.append(“rect”) /*…*/ .style(“fill”, function(d) { // d <—- is undefined return color_hash[dataset.indexOf(d)][1] }); Notice … Read more
Scott Murray wrote a great explanation of this[1]. For instance, for the code snippet: svg.append(“g”) .attr(“class”, “axis”) .attr(“transform”, “translate(0,” + h + “)”) .call(xAxis); He explains using the following: Note that we use attr() to apply transform as an attribute of g. SVG transforms are quite powerful, and can accept several different kinds of transform … Read more
Yes. First I would restructure your data for easier iteration, like this: var series = [ [{time: 1, value: 2}, {time: 2, value: 4}, {time: 3, value: 8}], [{time: 1, value: 5}, {time: 2, value: 9}, {time: 3, value: 12}], [{time: 1, value: 3}, {time: 2, value: 2}, {time: 3, value: 2}], [{time: 1, value: … Read more
If you’re asking about creating an HTML table from CSV data, this is what you want: d3.csv(“data.csv”, function(data) { // the columns you’d like to display var columns = [“name”, “age”]; var table = d3.select(“#container”).append(“table”), thead = table.append(“thead”), tbody = table.append(“tbody”); // append the header row thead.append(“tr”) .selectAll(“th”) .data(columns) .enter() .append(“th”) .text(function(column) { return column; … Read more
You don’t need to call each() or filter()… The attr() function will do this for you internally. Just call it with a function instead of a value, and have that function return the desired value for each datum, or null if the attribute is not desired for a particular datum, like so: … .attr(‘data-class’, function(d) … Read more
You could accomplish this using either the cluster or tree layouts. And using a custom path generator to draw orthogonal lines connecting nodes, as in this elbow dendrogram. I guess I was feeling inspired so I gave it a shot: http://bl.ocks.org/2966094
The correct way to use D3 within Node is to use NPM to install d3 and then to require it. You can either npm install d3 or use a package.json file, followed by npm install: { “name”: “my-awesome-package”, “version”: “0.0.1”, “dependencies”: { “d3”: “3” } } Once you have d3 in your node_modules directory, load … Read more
I can solve that problem – with trigonometry :). See fiddle: http://jsfiddle.net/nrabinowitz/GQDUS/ Basically, calling arc.centroid(d) returns an [x,y] array. You can use the Pythagorean Theorem to calculate the hypotenuse, which is the length of the line from the center of the pie to the arc centroid. Then you can use the calculations x/h * desiredLabelRadius … Read more
try switching your selectAll statement to: svg.selectAll(“rect.negative”).remove() This should select the tags rect with class negativealthough I’m not 100% sure it will find it because the attr class is written as bar negative. If it doesn’t work I might try changing your class attribute to something like negative bar or just negative. Sorry if this … Read more