标签未显示在d3朝阳图上

Question

I'm trying to make labels display on a sunburst chart using D3. I tried adding labels for each slice, but it doesn't work. What am I doing wrong? I looked up several similar problems but I'm not able to pin it down. Thanks for your time.

Here's the fiddle: https://jsfiddle.net/4mx4jsdw/

And here's the code I'm using to push in the text, temporarily I'm setting the rotation as 30 deg:

var path = vis.data([json]).selectAll("path")
  .data(nodes)
  .enter()
  .append("svg:path")
  .attr("display", function(d) { return d.depth ? null : "none"; })
  .attr("d", arc)
  .attr("fill-rule", "evenodd")
  .style("fill", function(d) { return colors(d.name); })
  .style("opacity", 1)
  .on("mouseover", mouseover)
  .append("text")
  .text(function(d) { console.log("Q", d.name); return d.name})
  .attr("x", function(d) { return d.x; })
  .attr("text-anchor", "middle")
  // translate to the desired point and set the rotation
  .attr("transform", function(d) {
    if (d.depth > 0) {
      return "translate(" + arc.centroid(d) + ")" +
      "rotate(" + 30 + ")";
    }  
    else {
      return null;
    }
  })

Answer 1

So I read up some d3 documentation and realised that if we are using circle elements, we need to bind the svg and text separately with the "g" tag. So I just need to add one more line of code:

.append("g")

into this block:

var path = vis.data([json]).selectAll("path")
  .data(nodes)
  .enter()
  .append("svg:path")

So the final block looks like this:

var path = vis.data([json]).selectAll("path")
  .data(nodes)
  .enter()
  .append("g")
  path.append("svg:path")

Here's the working fiddle . I'm still trying to rotate the text for perfection, but hey, it works!