Labels on bilevel D3 partition / sunburst layout

Question

I am trying to add labels to the bilevel sunburst / partition shown here - http://bl.ocks.org/mbostock/5944371:

I have added labels to the first 2 levels and rotated them correctly. But I cant now add the new level's labels during a transition. To get started I have put ...

text = text.data(partition.nodes(root).slice(1), function(d) { return d.key; });

straight after the ...

path = path.data(partition.nodes(root).slice(1), function(d) { return d.key; });

line but it throws the following error ...

Uncaught TypeError: Cannot read property '__data__' of undefined

What am I doing wrong?

Answer 1

I used bilevel partition to add labels via a mouseover, and found that in this version (unlike the other sunburst partition), there are two different sections where "path" is defined and updated. The first is here:

var path = svg.selectAll("path")

and then again below the transition you highlighted in your code: path.enter().append("path")

When i added my mouseover labels, I needed to reference my text function in both places or it wouldn't work after transition.

If you can post your code to JSFiddle or bl.ocks.org we can try to play with it and see, but that was where I got tripped up at first.

Hope that helps.

*NOTE: Comment didn't post: I'm sorry I'm not able to help more, but I'm also a newbie at D3. Here's where I got:

copy and paste your svg.selectAll("text") snippet after the second "path.enter().append("path") snippet. This will cause it to appear on subsequent zooms as well.

Problems I see: there's no "g" element so you need separate transitions for text as well or they all pile up. Also, I can't understand why they're positioned at their original partition spot instead of where the arc exists now.

My approach was add labels on mouseOver. I've uploaded that here: https://github.com/johnnymcnugget/d3-bilevelLabels

In this, I'm calling the two functions in both sets of "path" snippets, and the transitions are handled within the single variable of "legend"

Answer 2

Another D3 newbie, but I managed to resolve this. Beggining from the original Bilevel Partition:

1. Add the text for the first time the chart is drawn:

var path = svg.selectAll("path")
      .data(partition.nodes(root).slice(1))
    .enter().append("path")
      .attr("d", arc)
      .style("fill", function(d) { return d.fill; })
      .each(function(d) { this._current = updateArc(d); })
      .on("click", zoomIn);


var text = svg.selectAll("text")
      .data(partition.nodes(root).slice(1))
    .enter().append("text")
    .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
    .attr("x", function(d) {return radius / 3 * d.depth; })
    .attr("dx", "6") // margin
    .attr("dy", ".35em") // vertical-align
    .html(function(d) { return d.name; });

2. when zooming in or out you have to redraw labels, add the following in function zoom(root, p)

text.enter().append("text")
    .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
    .attr("x", function(d) {return radius / 3 * d.depth; })
    .attr("dx", "6") // margin
    .attr("dy", ".35em") // vertical-align
    .text(function(d) { return d.name; });

text.exit().transition()
    .style("fill-opacity", function(d) { return d.depth === 1 + (root === p) ? 1 : 0; })
    .remove();
text.transition()
    .style("fill-opacity", 1)
    .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
    .attr("x", function(d) {return radius / 3 * d.depth; })
    .attr("dx", "6") // margin
    .attr("dy", ".35em") // vertical-align

3. Finally modify the computeTextRotation function as:

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

Hope I haven't missed anything.

Answer 3

Indeed one modified line is missing in "2.". In function zoom(root, p), you should also add a line after path = path.data(partition ... .key; });:

        path = path.data(partition.nodes(root).slice(1), function (d) {
            return d.key;
        });

        text = text.data(partition.nodes(root).slice(1), function (d) {
            return d.key;
        });