If you peruse the release notes, you’ll see a full explanation of everything that’s changed between the final release of 2.x (2.10.3) and the most recent release, 3.2.7. In particular, from release 3.2.2: Better handling of drag gestures in d3.behavior.drag, d3.behavior.zoom and d3.svg.brush by not preventing default behaviors or stopping propagation. For example, mousedown now … 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
Expanding on @robert-longson’s answer, you can use SVG’s elliptical arc commands to make the corners, in conjunction with lineto commands for the straight edges. These are used with path elements. Here’s one possible implementation: // Returns path data for a rectangle with rounded right corners. // The top-left corner is ⟨x,y⟩. function rightRoundedRect(x, y, width, … Read more
The D3 gallery has a lot of good examples, but a lot of the examples loads their data from a tab-separated values file. This is a nice way to separate data and visualization in short examples, but it can be a bit confusing if you are new to D3 and JavaScript, since it requires some … Read more
Update 6/4/14 See also Mike Bostock’s answer here for changes in D3 v.3 and the related example. I think this probably supersedes the answer below. Update 2/18/2014 I think @ahaarnos’s answer is preferable if you want the entire SVG to pan and zoom. The nested g elements in my answer below are really only necessary … Read more
In d3 v5 the API for fetching data has changed quite a bit, which became necessary as the underlying workings have switched from using XMLHttpRequest to the Fetch API. In prior versions of D3 up to v4 your code would have behaved as you expected printing the single resulting array. The new API for d3.csv(), … Read more
Problem All your features are drawing, you are correctly using your path and enter cycle. To see, set your fill to none: You can see them when inspecting the svg: all the paths are there. Why don’t you see them in the map when they have fill? Because the the polygons are inverted, they cover … Read more
Here’s one implementation, in Javascript: http://jsfiddle.net/9FqKS/ You start by creating a name-based map for easy lookup. There are a few different ways to do this – in this case, I use a .reduce method, which starts with an empty object and iterates over the data array, adding an entry for each node: // create a … Read more
To display your svg within a canvas, you first have to convert it using a parser/renderer utility such as http://code.google.com/p/canvg/ (code adapted from: Convert SVG to image (JPEG, PNG, etc.) in the browser, not tested) // the canvg call that takes the svg xml and converts it to a canvas canvg(‘canvas’, $(“#my-svg”).html()); // the canvas … Read more
In my opinion, the force layout is unsuitable for the purpose of placing labels on a map. The reason is simple — labels should be as close as possible to the places they label, but the force layout has nothing to enforce this. Indeed, as far as the simulation is concerned, there is no harm … Read more