There’s no prescribed format, as you can usually redefine your data through various accessor functions (such as hierarchy.children) and array.map. But the format you quoted is probably the most convenient representation for trees because it works with the default accessors. The first question is whether you intend to display a graph or a tree. For … Read more
You are adding a text element inside a circle, that won’t work. You can add groups under the svg element and then append the circle and a text in each group: // Create the groups under svg var gnodes = svg.selectAll(‘g.gnode’) .data(graph.nodes) .enter() .append(‘g’) .classed(‘gnode’, true); // Add one circle in each group var node … Read more
UPDATE 05/04/2018: It is my understanding d3 has changed a lot (for the better) to be a lot more modular. For those who are looking towards this answer, this was using a much older version of d3 (specifically v3). A lot of the findings are still relevant for the d3-hierarchy package under cluster.size() and cluster.nodeSize() … 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
The problem with your question has nothing to do with programming, or JavaScript, or D3… the problem is a basic dataviz concept (that’s why I added the data-visualization tag in your question): What you’re trying to do is not correct! You should not use bars with a time scale. Time scales are for time series … Read more
As already stated in this comment and this answer, this does not have a different meaning between JavaScript and TypeScript. That being said, your problem here is way more prosaic: you’re trying to use this in an arrow function to get the current DOM element, and that will simply not work. So, in a nutshell, … Read more
OK for anyone wondering, this is how I managed to do it: function draw(){ d3.json(“readme.json”, function(json) { g.selectAll(“path”) .data(json.features) .enter() .append(“path”) .attr(“d”, path) .on(“click”, click); g.selectAll(“text”) .data(json.features) .enter() .append(“svg:text”) .text(function(d){ return d.properties.name; }) .attr(“x”, function(d){ return path.centroid(d)[0]; }) .attr(“y”, function(d){ return path.centroid(d)[1]; }) .attr(“text-anchor”,”middle”) .attr(‘font-size’,’6pt’); }); }
The d3-fetch module makes use of the Fetch API and will, therefore, return a Promise for each request issued via one of the module’s convenience methods. To load multiple files at once you could use Promise.all which will return a single Promise that resolves once all Promises provided to the call have resolved. import { … Read more
Here’s one way you could write your svg to canvas (and then save the result as a png or whatever): // Create an export button d3.select(“body”) .append(“button”) .html(“Export”) .on(“click”,svgToCanvas); var w = 100, // or whatever your svg width is h = 100; // Create the export function – this will just export // the … Read more
There’s a better solution. I hadn’t realized that the d3.xml() function returns a read-in xml file as a document fragment (as opposed to converting it to JSON). In other words, it returns a ready-made DOM tree that can be inserted within you main document’s DOM wherever you need it. Knowing that (and knowing that stand-alone … Read more