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

Question

这是 this question 的后续行动. (感谢西里尔的帮助!!)

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

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

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

下面是我想要的示例。当用户点击 Visualizations 时，viz 和 flare 应该变成 vizX 和 flareX。它们的样式类应该从 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.

希望这对您有所帮助!