无法使标签在可缩放的 d3 sunburst 上工作

Question

现在摆弄了几个小时后，我仍然无法在我的 D3 Sunburst 布局中使用标签。下面是它的样子：

http://codepen.io/anon/pen/BcqFu

我尝试了几种可以在网上找到的方法，这是我尝试过的示例列表，不幸的是，我都失败了：

[由于新用户限制，无法发布链接列表]

当然还有咖啡风味轮：http://www.jasondavies.com/coffee-wheel/

目前我用标题标签填充切片，只是在将鼠标悬停在元素上时才显示它。为此，我正在使用此代码：

 vis.selectAll("path")
   .append("title")
   .text(function(d) { return d.Batch; });

有没有类似的东西可以用来在切片中显示批号？

--

更多信息：Jason Davies 使用此代码选择和添加文本节点：

var text = vis.selectAll("text").data(nodes);
var textEnter = text.enter().append("text")
  .style(...)
  ...

虽然他的轮子的选择返回了 97 个结果（等于路径标签的数量），但我只得到一个，因此只能显示一个标签（中间的那个）

Answer 1

需要一些技巧，但让你开始的基本部分是：

  var labels = vis.selectAll("text.label")
      .data(partition.nodes)
    .enter().append("text")
      .attr("class", "label")
      .style("fill", "black")
      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
      .text(function(d, i) { return d.Batch;} );

你可以看到here

诀窍在于，除了确保将文本节点附加到适当的数据之外，您还必须告诉它们去哪里（带有弧形计算机方便的质心功能的变换属性）。

请注意，我不需要 vis.data([json]) 因为 svg 元素已经附加了数据（当您附加路径时），但我仍然必须将文本选择与来自每个分区的节点相关联。

我还对文本元素进行了分类，这样它们就不会与您将来可能要添加的任何其他文本元素混淆。