Issue labeling d3 sunburst

Question

I am developing a d3 sunburst type.

Everything is ok, It is taking the flare JSON correctly but, when I go to label the path look what is happening:

enter image description here

The code is the following:

var width = 960,
    height = 700,
    radius = Math.min(width, height) / 2;

var x = d3.scale.linear()
    .range([0, 2 * Math.PI]);

var y = d3.scale.linear()
    .range([0, radius]);

var hue = d3.scale.ordinal().range(["#feec76","#aec7e8","#ff00bf","#7f7f7f"]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");

var partition = d3.layout.partition()
    .value(function(d) { return d.size; });

var arc = d3.svg.arc()
    .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
    .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
    .innerRadius(function(d) { return Math.max(0, y(d.y)); })
    .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });

d3.json("http://api.printoriente.com/treemap.php", function(error, root) {
  var g = svg.selectAll("g")
      .data(partition.nodes(root))
    .enter().append("g");

  var path = g.append("path")
    .attr("d", arc)
    .style("fill", function(d) { return hue((d.children ? d : d.parent).name); })
    .on("click", click);

  var text = g.append("text")
    .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
    .attr("x", function(d) { return y(d.y); })
    .attr("dx", "6") // margin
    .attr("dy", ".35em") // vertical-align
    .text(function(d) { return d.name; });

And the rotation code is:

function computeTextRotation(d) {
  return (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180;
}

This script works for all others d3 but I have to put those colors for each path.

Where is the problem?

Regards.

UPDATED: d3 sunburst with small font-size:

enter image description here

UPDATED: I want something like this:

enter image description here

UPDATED: Take a look of internal labels:

enter image description here

Not sure what you're saying. Do you want the text to be coloured or is the spacing the issue? — Lars Kotthoff, Jan 10 '14 at 21:32
The spacing between labels is the problem. I am saying that this code works in others d3 sunbursts but not in mine. Ignore it, my problem is with the labels. — araujophillips, Jan 10 '14 at 21:35
That's because some of your slices are so small that the labels are too big. You could try to move the labels outside the sunburst, but your slices are so small that this is unlikely to help. Tooltips might be a better option. — Lars Kotthoff, Jan 10 '14 at 21:39
It is not the problem. See the update, I put a smaller font-size and the issue continue. — araujophillips, Jan 10 '14 at 21:44
Look at the slices. Some of them are very thin. There's no space to put labels there, regardless of font size. — Lars Kotthoff, Jan 10 '14 at 21:47
I dont think that could be the problem. I tried with font-size 1px and It doesnt works. — araujophillips, Jan 10 '14 at 21:51
Oh, just the position? You can adjust that using `text-anchor` and/or `dx`. — Lars Kotthoff, Jan 10 '14 at 22:00
Ya, the labels' position. text-anchor? I am very newbie in d3, really, but i am very close to finish my project. Help me please. — araujophillips, Jan 10 '14 at 22:02
Ok. Thats works for now. I changed on var text, dx .attr("dx", "6") for dx .attr("dx", "40"). but the problem with the label rotation continue. I have to rotate it 45° to the left aprox. — araujophillips, Jan 10 '14 at 22:06
Have you seen [this example](http://tributary.io/inlet/4127332/)? — Lars Kotthoff, Jan 10 '14 at 22:10
Ok. It could take me some minutes to do it manually. Please wait a sec while i finish it to send you. — araujophillips, Jan 10 '14 at 22:12
Ok. I finished It. You can see the image updated. Please, ignore the externals labels, take a look of internal labels (Creativo, No Etiquetado, Emprendedor and Creativo). The rest of labels are sons of the internal labels, I want all the labels in this positions with their children. — araujophillips, Jan 10 '14 at 22:18
I can send you all the code and the JSON, if you want to create a simple html file. Ok? — araujophillips, Jan 10 '14 at 22:26
Give me your email to send the code. Is easier, ok? Help me please I am desperate. — araujophillips, Jan 10 '14 at 22:27
Right. Look this http://jsfiddle.net/8k4F3/ and say me if it works please. — araujophillips, Jan 10 '14 at 22:30
I will be right back in a second. I am at the office, going to my home. If you have an anwers please give me it. — araujophillips, Jan 10 '14 at 22:37
Is [this](http://jsfiddle.net/8k4F3/1/) what you're looking for? — Lars Kotthoff, Jan 10 '14 at 22:43
YEAH!!! Thats it!!! I am checking it at my phone... Let me check it at my laptop but thanks you very much!. What do you did? Please explain me. — araujophillips, Jan 10 '14 at 23:40

score 0 · Answer 1 · answered Jan 11 '14 at 11:47

I'm not sure where you got the code to calculate the angle from, but it seems to be completely off. If you look at this example, the code to compute the angle is (with everything else being equal)

var angle = (d.x + d.dx / 2) * 180 / Math.PI - 90;

Replacing the code in your example with that fixes the angles. To fix the positions, you can adjust the dx offset of the labels, e.g.

.attr("dx", 50")

Complete example here.

Issue labeling d3 sunburst

1 Answers1