1

我正在尝试将标签添加到此处显示的双层旭日形/分区 - http://bl.ocks.org/mbostock/5944371：

在此处输入图像描述

我已将标签添加到前 2 个级别并正确旋转它们。但是我现在不能在过渡期间添加新级别的标签。为了开始，我已经把......

text = text.data(partition.nodes(root).slice(1), function(d) { return d.key; });

紧接着...

path = path.data(partition.nodes(root).slice(1), function(d) { return d.key; });

行，但它会引发以下错误...

Uncaught TypeError: Cannot read property '__data__' of undefined

我究竟做错了什么？

4

3 回答 3

2

我使用双层分区通过鼠标悬停添加标签，发现在这个版本中（与其他 sunburst 分区不同），有两个不同的部分定义和更新了“路径”。第一个在这里：

var path = svg.selectAll("路径")

然后再次在您在代码中突出显示的转换下方： path.enter().append("path")

当我添加鼠标悬停标签时，我需要在这两个地方引用我的文本函数，否则在转换后它将不起作用。

如果您可以将您的代码发布到 JSFiddle 或 bl.ocks.org，我们可以尝试使用它并查看，但那是我一开始被绊倒的地方。

希望有帮助。

*注意：未发表评论：对不起，我无法提供更多帮助，但我也是 D3 的新手。这是我得到的地方：

在第二个“path.enter().append("path") 片段之后复制并粘贴您的 svg.selectAll("text") 片段。这将导致它也出现在后续缩放中。

我看到的问题：没有“g”元素，所以你也需要单独的文本转换，否则它们都会堆积起来。另外，我不明白为什么它们被定位在原来的分区位置，而不是现在存在的弧。

我的方法是在 mouseOver 上添加标签。我已经在这里上传了：https ://github.com/johnnymcugget/d3-bilevelLabels

在此，我在两组“路径”片段中调用这两个函数，并且在“图例”的单个变量中处理转换

于 2013-07-22T18:48:46.747 回答
1

另一个 D3 新手，但我设法解决了这个问题。从原始的Bilevel Partition开始：

  1. 添加第一次绘制图表时的文本：
var path = svg.selectAll("path")
      .data(partition.nodes(root).slice(1))
    .enter().append("path")
      .attr("d", arc)
      .style("fill", function(d) { return d.fill; })
      .each(function(d) { this._current = updateArc(d); })
      .on("click", zoomIn);


var text = svg.selectAll("text")
      .data(partition.nodes(root).slice(1))
    .enter().append("text")
    .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
    .attr("x", function(d) {return radius / 3 * d.depth; })
    .attr("dx", "6") // margin
    .attr("dy", ".35em") // vertical-align
    .html(function(d) { return d.name; });
  1. 放大或缩小时，您必须重新绘制标签，添加以下内容function zoom(root, p)
text.enter().append("text")
    .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
    .attr("x", function(d) {return radius / 3 * d.depth; })
    .attr("dx", "6") // margin
    .attr("dy", ".35em") // vertical-align
    .text(function(d) { return d.name; });

text.exit().transition()
    .style("fill-opacity", function(d) { return d.depth === 1 + (root === p) ? 1 : 0; })
    .remove();
text.transition()
    .style("fill-opacity", 1)
    .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
    .attr("x", function(d) {return radius / 3 * d.depth; })
    .attr("dx", "6") // margin
    .attr("dy", ".35em") // vertical-align
  1. 最后修改computeTextRotation函数为：
function computeTextRotation(d) {
  return (d.x + (d.dx)/2) * 180 / Math.PI - 90;
}

希望我没有错过任何东西。

于 2014-10-31T13:26:52.290 回答
0

实际上，“2.”中缺少一条修改过的行。在function zoom(root, p)中，您还应该在 之后添加一行path = path.data(partition ... .key; });：

        path = path.data(partition.nodes(root).slice(1), function (d) {
            return d.key;
        });

        text = text.data(partition.nodes(root).slice(1), function (d) {
            return d.key;
        });
于 2016-06-27T20:18:38.907 回答