D3.js 两层D3分区/sunburst布局上的标签

我正在尝试将标签添加到此处显示的双层sunburst/分区-：

我已将标签添加到前两个级别，并正确旋转了它们。但是我现在不能在转换期间添加新级别的标签。首先，我把

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

---

我做错了什么？

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

var path=svg.selectAll（“路径”）

然后在代码中突出显示的转换下面： path.enter（）.append（“路径”）

当我添加鼠标悬停标签时，我需要在两个位置引用我的文本函数，否则在转换后它将无法工作

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

希望有帮助

*注意：评论没有发布：

---

很抱歉，我无法提供更多帮助，但我也是D3的新手。这是我得到的：

复制并粘贴svg。在第二个“path.enter（）”片段后选择All（“text”）片段。追加（“path”）片段。这将导致它也出现在后续的缩放中

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

我的方法是在鼠标上方添加标签。我已将其上传到此处：

---

在本例中，我在两组“path”代码段中调用了这两个函数，并且在“legend”的单个变量中处理转换，这是另一个D3新手，但我成功地解决了这个问题。从原始版本开始：

首次绘制图表时添加文本：

var path=svg.selectAll（“路径”）
.data（分区.节点（根）.slice（1））
.enter（）.append（“路径”）
.attr（“d”，弧）
.style（“fill”，函数（d）{return d.fill；}）
.each（函数（d）{this._current=updateArc（d）；}）
。打开（“单击”，缩放）；
var text=svg.selectAll（“文本”）
.data（分区.节点（根）.slice（1））
.enter（）.append（“文本”）
.attr（“transform”，函数（d）{return“rotate”（“+computeextrotation（d）+”）；}）
.attr（“x”，函数（d）{返回半径/3*d.depth；}）
.attr（“dx”，“6”）//保证金
.attr（“dy”，“.35em”）//垂直对齐
.html（函数（d）{返回d.name；}）；

放大或缩小时，您必须重新绘制标签，在

函数zoom（root，p）

text.enter（）.append（“文本”）
.attr（“transform”，函数（d）{return“rotate”（“+computeextrotation（d）+”）；}）
.attr（“x”，函数（d）{返回半径/3*d.depth；}）
.attr（“dx”，“6”）//保证金
.attr（“dy”，“.35em”）//垂直对齐
.text（函数（d）{返回d.name；}）；
text.exit（）.transition（）
.style（“填充不透明度”，函数（d）{return d.depth==1+（root==p）？1:0；}）
.remove（）；
text.transition（）
.style（“填充不透明度”，1）
.attr（“transform”，函数（d）{return“rotate”（“+computeextrotation（d）+”）；}）
.attr（“x”，函数（d）{返回半径/3*d.depth；}）
.attr（“dx”，“6”）//保证金
.attr（“dy”，“.35em”）//垂直对齐

最后将

computeExtration

函数修改为：

函数计算旋转（d）{
返回值（d.x+（d.dx）/2）*180/Math.PI-90；
}

---

希望我没有遗漏任何内容。

事实上，“2”中缺少一行修改过的内容。在

函数缩放（root，p）

中，您还应该在

path=path.data（partition….key；}）之后添加一行；

：

---

如何定义“text”var？您链接到的示例中没有定义它。显示您添加的所有代码。感谢提供@johnymcnugget。在此处链接到代码-很抱歉，我无法提供更多帮助，但我也是D3的新手。我今天在这里看到了这一点：复制并粘贴您的svg。第二个“文本”片段后选择all（“文本”）path.enter（）.append（“path”）代码段。这将导致它也出现在后续的缩放中。出于某种原因，它在

text.enter（）.append（“text”）

处抛出“uncaughttypeerror:text.enter不是函数”。是否有将代码添加到

zoom

功能中的特定位置？也许你还有整个

zoom

功能？

        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;
        });