Label outside arc (Pie chart) d3.js

by

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 and y/h * desiredLabelRadius to calculate the desired x,y for your label anchor:

.attr("transform", function(d) {
    var c = arc.centroid(d),
        x = c[0],
        y = c[1],
        // pythagorean theorem for hypotenuse
        h = Math.sqrt(x*x + y*y);
    return "translate(" + (x/h * labelr) +  ',' +
       (y/h * labelr) +  ")"; 
})

The only downside here is that text-anchor: middle isn’t a great choice anymore – you’d be better off setting the text-anchor based on which side of the pie we’re on:

.attr("text-anchor", function(d) {
    // are we past the center?
    return (d.endAngle + d.startAngle)/2 > Math.PI ?
        "end" : "start";
})

More Related Contents:

  1. Add text label to d3 node in Force directed Graph and resize on hover
  2. Scaling d3 v4 map to fit SVG (or at all)
  3. How to add a tooltip to an svg graphic?
  4. Replacing d3.transform in D3 v4
  5. How do I include newlines in labels in D3 charts?
  6. How can d3.transform be used in d3 v4?
  7. Updating SVG Element Z-Index With D3
  8. D3 Appending Text to a SVG Rectangle
  9. d3 add text to circle
  10. In d3, how to get the interpolated line data from a SVG line?
  11. Creating and appending detached elements with d3.create
  12. D3js take data from an array instead of a file
  13. Where is d3.svg.diagonal()?
  14. (Embed and) Refer to an external SVG via D3 and/or javascript
  15. Plotting points on a map with D3
  16. D3 fill shape with image using pattern
  17. Add text label to d3 node in Force layout
  18. D3 – how to deal with JSON data structures?
  19. Setting rounded corners for svg:image
  20. How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
  21. nvd3 piechart.js – How to edit the tooltip?
  22. svg / d3.js rounded corners on one side of a rectangle
  23. SVG to Canvas with d3.js
  24. Add names of the states to a map in d3.js
  25. How do I return y coordinate of a path in d3.js?
  26. Display an arrow head in the middle of D3 force layout link
  27. Calculate SVG Path Centroid with D3.js
  28. Can’t make paths draw growing slowly with D3
  29. draw text in d3 arc javascript
  30. D3 put arc labels in a Pie Chart if there is enough space

Leave a Comment