d3.js v4: How to access parent group’s datum index?

Well, sometimes an answer doesn’t provide a solution, because the solution may not exist. This seems to be the case. According to Bostock: I’ve merged the new bilevel selection implementation into master and also simplified how parents are tracked by using a parallel parents array. A nice property of this new approach is that selection.data … Read more

D3 force directed layout with bounding box

There’s a bounding box example in my talk on force layouts. The position Verlet integration allows you to define geometric constraints (such as bounding boxes and collision detection) inside the “tick” event listener; simply move the nodes to comply with the constraint and the simulation will adapt accordingly. That said, gravity is definitely a more … Read more

Loading external csv file in jsfiddle

The approach I usually use for CSV data in JSFiddle examples is a. Put the data in a <pre> block at the end of the HTML mark-up, usually with the id “data”. b. Add pre {display:none;} to the CSS. c. Replace the d3.csv(filename, callback) function call with a d3.csv.parse(text) call, using the text content of … Read more

Tree drawing orientation

The tree layout computes node positions in an arbitrary coordinate space of breadth (x) and depth (y). To change the orientation of the layout, change the mapping from the layout’s coordinate space to SVG pixel coordinates. If you prefer not to do the mapping manually, you could use quantitative scales to specify a more intuitive … Read more

D3: update data with multiple elements in a group

The key is to handle all the selections, not just the enter selection: var myGroups = svg.selectAll(‘g’).data(myData); // enter selection var myGroupsEnter = myGroups.enter().append(“g”); myGroupsEnter.append(“line”); myGroupsEnter.append(“polygon”); // … // update selection — this will also contain the newly appended elements myGroups.select(“line”).attr(…); // … // exit selection myGroups.exit().remove(); There are two things here that warrant further … Read more

d3.js v5 – Promise.all replaced d3.queue

You can simplify that code a lot: you don’t net to use new Promise with d3.json, since d3.json will itself create the promise. So, you can just do: var files = [“data1.json”, “data2.json”, “data3.json”]; var promises = []; files.forEach(function(url) { promises.push(d3.json(url)) }); Promise.all(promises).then(function(values) { console.log(values) }); Or, if you’re into the code golf, even shorter: … Read more

Calm down initial tick of a force layout

All the answers above misunderstood Øystein Amundsen’s question. The only way to stabilize the force upon it starts is to set node.x and node.y a proper value. Please note that the node is the data of d3.js, not the represented DOM type. For example, if you load nodes = [{“id”: a}, {“id”: b}, {“id”: c}] … Read more

Drawing Multiple Lines in D3.js

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

Loading D3.js data from a simple JSON string

for remote data.json replace : d3.tsv(“data.tsv”, function(error, data) {…} with : d3.json(“data.json”, function(error, data) { console.log(data); // this is your data }); for local data: var myData = { {date:’2013-05-01′, frequency:99}, {date:’2013-05-02′, frequency:24} }; function draw(data) { console.log(data); // this is your data } draw(myData);