向 d3 sunburst 添加标签

Question

我正在尝试修改此处的 D3 旭日形示例 (http://bl.ocks.org/mbostock/4063423) 以向弧线添加标签。

我添加了代码来计算角度并生成文本（取自此示例：http://jsfiddle.net/4PS53/6/），但它不起作用。文本没有显示，当我尝试使用检查器检查元素时，它们似乎不在 DOM 中。

非常感谢任何帮助！ JS代码如下（修改自原来的D3图库示例），JSON数据相同。我正在展示我修改过的代码部分；其余相同

d3.json("data.json", function(error, root) {
  console.log(root);
  var path = svg.datum(root).selectAll("path")
      .data(partition.nodes)
      .enter().append("path")
      .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
      .attr("d", arc)
      .style("stroke", "#fff")
      .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
      .style("fill-rule", "evenodd")
      .each(stash);

  path.append("text")
        .text(function(d) { return d.name})
        .classed("label", true)
        .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(" + getAngle(d) + ")";
            }  else {
                return null;
            }
        })
        .attr("dx", "6") // margin
        .attr("dy", ".35em") // vertical-align
        .attr("pointer-events", "none");

});

function getAngle(d) {
    // Offset the angle by 90 deg since the '0' degree axis for arc is Y axis, while
    // for text it is the X axis.
    var thetaDeg = (180 / Math.PI * (arc.startAngle()(d) + arc.endAngle()(d)) / 2 - 90);
    // If we are rotating the text by more than 90 deg, then "flip" it.
    // This is why "text-anchor", "middle" is important, otherwise, this "flip" would
    // a little harder.
    return (thetaDeg > 90) ? thetaDeg - 180 : thetaDeg;
}

Answer 1

您需要 g 组元素来添加文本，因此您只需更改：

var path = svg.datum(root).selectAll("path")
  .data(partition.nodes)
  .enter().append("path")
  .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
  .attr("d", arc)
  .style("stroke", "#fff")
  .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
  .style("fill-rule", "evenodd")
  .each(stash);

到

var path = svg.datum(root).selectAll("path")
  .data(partition.nodes)
  .enter().append("g")

path.append("path")
  .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
  .attr("d", arc)
  .style("stroke", "#fff")
  .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
  .style("fill-rule", "evenodd")
  .each(stash);

检查这个 jsFiddle： http://jsfiddle.net/5d0zd2s7/

向 d3 sunburst 添加标签

Adding labels to d3 sunburst

javascript

d3.js

sunburst-diagram