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

Question

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

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

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

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

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

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

Answer 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.

希望对您有所帮助！

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

How can I change style class & content of text for ancestors in this d3.js tree?

javascript

tree

d3.js

angularjs