如何更改此 d3.js 树中祖先的样式类和文本内容？答案

【问题标题】：How can I change style class & content of text for ancestors in this d3.js tree?如何更改此 d3.js 树中祖先的样式类和文本内容？
【发布时间】：2016-09-19 02:24:42
【问题描述】：

这是this question 的后续行动。（感谢西里尔的所有帮助！！）

我的问题有点棘手，我仍然需要一些帮助。当用户单击任何节点的文本元素时，我希望发生以下情况：

对于该元素的每个树祖先：
- 将“X”附加到该文本元素
- 从该元素中删除样式类“class1”
- 从该元素添加样式类“class2”
- 从该元素禁用 onclick 方法
在这些步骤中，其他节点应保持完全不变。

按照 Cyril 的建议，我已将 parent 项添加到表示 collapse() 中数据的对象中。所以我可以遍历到root的路径。但是，当我遍历这条路径时，我无法获取文本的 d3.js 元素。我怎样才能做到这一点？一旦我这样做了，上面的操作对我来说就比较简单了。

以下是我想要的示例。当用户点击Visualizations时，viz和flare应该变成vizX和flareX。他们的样式类应该从class1 切换到class2。点击vizX 和flareX 文本应该没有效果。 不应以任何方式更新其他节点。

我该怎么做？我需要能够在遍历树时抓取 d3.js 绘图元素。

【问题讨论】：

标签： javascript angularjs d3.js tree

【解决方案1】：

当你从点击的节点向上遍历到父根。

您还可以获取数据的 DOM 元素（包含圆圈和文本的组），如下面的函数所示。

function findNode(text){
  var DOM = d3.selectAll(".node")[0].find(function(node){
    return (d3.select(node).data()[0].name == text);
  })
  return DOM;
}

所以现在，当您拥有数据并且想要找到它关联的组时。

你可以利用上面的函数并调用。

  var k = findNode("physics");//this will return the DOM which has the node physics.

希望这会有所帮助！

【讨论】：

谢谢！我通过 var domElement = findNode("flare"); 从数据对象中获取了 DOM 元素。在开发控制台中，我可以看到构成该 domElement 的 HTML。但是当我尝试执行var x = domElement.select("text"); 时，出现以下错误：Uncaught TypeError: domElement.select is not a function
好的，请 d3.select(domElement).select("text")。原因函数返回的domElement只是html DOM，所以需要先选中它，然后再选中它包含的文本。
我在这里做错了什么？以下仍然不会改变文本：var textElement = d3.select(self.findNode(d)).select("text")[0]; console.log("textElement = ", textElement); textElement.textContent = d.name + "X";`
这个var text = d3.select(self.findNode(d)).select("text").text(); d3.select(self.findNode(d)).select("text").text(text + "-X");怎么样
是的！非常感谢