score:1
@larskotthoff
finally i have solved the problem. i have used stack approach to display the labels. i made a virtual stack on both left and right side. based the angle of the slice, i allocated the stack-row. if stack row is already filled then i find the nearest empty row on both top and bottom of desired row. if no row found then the value (on the current side) with least share angle is removed from the stack and labels are adjust accordingly.
see the working example here: http://manicharts.com/#/demosheet/3d-donut-chart-smart-labels
score:1
for small angles(less than 5% of the pie chart), i have changed the centroid value for the respective labels. i have used this code:
arcs.append("text")
.attr("transform", function(d,i) {
var centroid_value = arc.centroid(d);
var pievalue = ((d.endangle - d.startangle)*100)/(2*math.pi);
var accuratepievalue = pievalue.tofixed(0);
if(accuratepievalue <= 5){
var pielablearc = d3.svg.arc().innerradius(i*20).outerradius(outer_radius + i*20);
centroid_value = pielablearc.centroid(d);
}
return "translate(" + centroid_value + ")";
})
.text(function(d, i) { ..... });
score:2
the actual problem here is one of label clutter. so, you could try not displaying labels for very narrow arcs:
.text(function(d) {
if(d.endangle - d.startangle<4*math.pi/180){return ""}
return d.data.key; });
this is not as elegant as the alternate solution, or codesnooker's resolution to that issue, but might help reduce the number of labels for those who have too many. if you need labels to be able to be shown, a mouseover might do the trick.
score:5
d3 doesn't offer anything built-in that does this, but you can do it by, after having added the labels, iterating over them and checking if they overlap. if they do, move one of them.
var prev;
labels.each(function(d, i) {
if(i > 0) {
var thisbb = this.getboundingclientrect(),
prevbb = prev.getboundingclientrect();
// move if they overlap
if(!(thisbb.right < prevbb.left ||
thisbb.left > prevbb.right ||
thisbb.bottom < prevbb.top ||
thisbb.top > prevbb.bottom)) {
var ctx = thisbb.left + (thisbb.right - thisbb.left)/2,
cty = thisbb.top + (thisbb.bottom - thisbb.top)/2,
cpx = prevbb.left + (prevbb.right - prevbb.left)/2,
cpy = prevbb.top + (prevbb.bottom - prevbb.top)/2,
off = math.sqrt(math.pow(ctx - cpx, 2) + math.pow(cty - cpy, 2))/2;
d3.select(this).attr("transform",
"translate(" + math.cos(((d.startangle + d.endangle - math.pi) / 2)) *
(radius + textoffset + off) + "," +
math.sin((d.startangle + d.endangle - math.pi) / 2) *
(radius + textoffset + off) + ")");
}
}
prev = this;
});
this checks, for each label, if it overlaps with the previous label. if this is the case, a radius offset is computed (off
). this offset is determined by half the distance between the centers of the text boxes (this is just a heuristic, there's no specific reason for it to be this) and added to the radius + text offset when recomputing the position of the label as originally.
the maths is a bit involved because everything needs to be checked in two dimensions, but it's farily straightforward. the net result is that if a label overlaps a previous label, it is pushed further out. complete example here.
Source: stackoverflow.com
Related Query
- How to avoid labels overlapping in a D3.js pie chart?
- How to avoid overlapping tooltips of multi-series line chart d3.js
- How to move labels to outside pie chart in D3
- How do I color labels for my pie chart in D3?
- D3.js: how to put labels and fix colors on a pie chart
- How to add non-overlapping polylines and text labels to 3D pie chart using d3.js?
- How to customize color in pie chart of NVD3
- How can I position rotated x-axis labels on column chart using nvd3?
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
- How to add drop shadow to d3.js pie or donut chart
- How to do wordwrap for chart labels using d3.js
- D3 - Pie Chart & Force Directed Labels
- how to create labels for data in donut chart using d3.js
- d3.js pie chart with angled/horizontal labels
- D3 put arc labels in a Pie Chart if there is enough space
- How to add a nice legend to a d3 pie chart
- How to avoid the overlapping of text elements on the TreeMap when child elements are opened in D3.js?
- d3js Redistributing labels around a pie chart
- How do I add labels to d3.js force bubble chart
- d3.js bar chart sorting: can't figure out how to sort x-axis labels along with bars
- how to add legend to a pie chart using D3js? And how to centralise the pie chart?
- How can I rotate d3 chart and how can I start pie chart from angle -90?
- How to add a legend and labels to the pie chart?
- dimple.js How can I change the labels of a chart axis without changing the data?
- How to modify axis labels in d3 for a stacked bar chart when the axis labels are mapped as part of the scale's domain
- x axis labels overlapping for grouped category bar chart in d3
- How to set domain to avoid overlapping dots and axis in d3 plot?
- How to add events to the individual sections(arcs) of a pie chart created out of d3.js?
- how to create pie chart using dc.js
- How would I import a single column CSV file into a pie chart using Javascript D3?
More Query from same tag
- in rails, how do i access json from my d3 js code?
- removing all svg elements in D3 save some specified
- getting rid of <canvas> to display polygons on top of image with .tif extension
- How to append `text` element by conditional in d3js
- D3 js bbox not forming in v7
- IE10 d3.v3.js error: Unable to get property 'prototype' of undefined or null reference
- How to center a svg in a div container
- d3.js array issues: Invalid value for <path> in line graph
- How can I get a list of tree-ancestors and tree-descendants from this d3.js layout.tree?
- Append an element with a name set conditionally with D3
- Adding event marks to a line chart
- How to Scale/Choose D3 Projection Settings from .shp File
- Why is the 'this' variable not the expected value?
- D3v4 zoom coordinates of visible area
- how to add values in one single bar in d3 bar chart
- D3 and dimple line charts
- Tooltip is not displaying despite data being present
- how to read dynamic tsv file d3js
- how to generate a graph/diagram like Google Analytics's Visitor Flow?
- How to do smooth transition for map reprojection in d3 js
- Unable to render simple graph in d3.js by reading data from MySQL using JSON
- How to update the fill and sorting the values of lollipop chart?
- D3.js force layout slow in IE 9
- Passing a string to a template that has d3.js tree within a Django app
- How to add text alternative for external images in SVG?
- Draw line chart using dc js
- Crossfilter can't filter one dimension by another
- Drag not working correctly after node transition, D3
- Positioning multiple SVG elements in div HTML
- Set y-axis of d3 chart to fit widest label?