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

Question

这是这个问题的后续行动。 （谢谢西里尔的所有帮助!!）

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

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

我已将parent项添加到Object中，表示collapse()的数据，如Cyril所建议的那样。 所以我可以遍历到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.

希望这可以帮助！