d3.csv is asynchronous by design to prevent pages from freezing up, so that can’t be changed without changing the d3 library itself. However, you could pre-load all your files via d3.text() and call d3.csv.parse or d3.csv.parseRows, which will be synchronous given that the text file has been loaded. For an example, see Mike Bostock’s answer … Read more
The default ticks for quantitative scales are multiples of 2, 5 and 10. You appear to want multiples of 6; though unusual, this could make sense depending on the nature of the underlying data. So, while you can use axis.ticks to increase or decrease the tick count, it will always return multiples of 2, 5 … Read more
It looks like you are using the wrong selector while updating the axes: svg.selectAll(“g .y.axis”) .call(yAxis); svg.selectAll(“g .x.axis”) .call(xAxis); maybe should read: svg.selectAll(“g.y.axis”) .call(yAxis); svg.selectAll(“g.x.axis”) .call(xAxis);
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
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
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
Background You are manipulating the transform applied to your elements in the click function but not updating the zoom state to reflect this. d3.zoom does not track an element’s transform at all. So when you modify the transform attribute of an element independently of d3.zoom, d3.zoom no longer “knows” what the transform is of that … Read more
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
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
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