Geek Answers Handbook

Prevent Duplication of Text in a D3 Pie Chart

I walked around the world, but I can not understand this.

My situation is that countries intersect when they are represented in a pie chart:

This is an example of what is happening:

jsfiddle

enter image description here

I start with D3 and try to prevent text from matching. Is there a text box attribute that I can add so that my labels do not overlap?

+7
javascript pie-chart label overlap
source share
2 answers

Refresh : see answer D3 place arc marks in a pie chart if there is enough space for a more complete solution.

I do not know any general method for stacking text elements so that they do not overlap.

However, there is a workaround for your problem by rotating the labels and scaling the graph so that they do not overlap: http://jsfiddle.net/2uT7F/

 // Get the angle on the arc and then rotate by -90 degrees var getAngle = function (d) { return (180 / Math.PI * (d.startAngle + d.endAngle) / 2 - 90); }; g.append("text") .attr("transform", function(d) { return "translate(" + pos.centroid(d) + ") " + "rotate(" + getAngle(d) + ")"; }) .attr("dy", 5) .style("text-anchor", "start") .text(function(d) { return d.data.label; });
+10
source share

Another solution would be to reorder the data with the first in the USA. You can find the corner of the cake layout to be more readable.

 var data_values = [48, 1, 1, 1, 1, 1, 1, 4]; var titles = ["USA","Pakistan", "Israel", "Netherlands", "Italy", "Uruguay", "United Kingdom", "Austria", "China"]

http://jsfiddle.net/rocky1616/oLzsrd4o/

Musically_ut solution will also work well here. You can even raise the corner a bit if that works in your design.

  var getAngle = function (d) { return (180 / Math.PI * (d.startAngle + d.endAngle) / 2 + 45); };

http://jsfiddle.net/2uT7F/26/

You will need to create an if else block to take care of the US position, but this is the beginning, if that helps.

+1
source share

More articles:


All Articles