Question

我正在尝试使用D3在旭日图表上显示标签。我尝试为每个切片添加标签，但它不起作用。我究竟做错了什么？我查了几个类似的问题，但我无法把它固定下来。谢谢你的时间。

这是我用来推文的代码，暂时我将旋转设置为30度：

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

所以我读了一些d3文档并意识到如果我们使用circle元素，我们需要将svg和text分别与“g”标签绑定。所以我只需要添加一行代码：

.append("g")

进入这个区块：

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

所以最后的块看起来像这样：

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

这是working fiddle。我仍然试图将文本旋转完美，但是，嘿，它有效！

标签未在d3森伯斯特图表

1 个答案: