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

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

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

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

此外，我对文本元素进行分类，以便它们不会与您将来可能要添加的任何其他文本元素混淆。