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

Question

现在摆弄了几个小时后，我仍然无法让标签在我的 D3 Sunburst 布局中工作。这是它的样子:

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

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

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

当然还有咖啡 flavor 轮: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

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

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

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