【问题标题】:Search into a node ID in D3在 D3 中搜索节点 ID
【发布时间】:2018-01-17 14:38:25
【问题描述】:

我正在做一棵树,使用Mike Bostock Tidy Tree

在这里的一些人的帮助下,我做了一个函数来突出显示从我将鼠标放入的节点到根的路径的节点。 我还做了一个简单的功能,通过重置所有节点和链接颜色来重置颜色/笔划。 但现在我想突出显示一个节点到另一个通过根的节点之间的一些路径。

例如,如果我有一个名为 ABC 的外部节点连接到另一个名为 XYZ 的外部节点,它将突出显示 ABC 到根,XYZ 到根,这样我们就可以看到两者都连接了。

为了让计算机理解我想到了两种方法,在 id 的末尾添加一个标签,例如为每个配对的外部节点添加一个标签,或者在 csv 文件中为节点添加一个值,例如 12。

之后,我希望脚本检查所有节点以找到具有相同结束 id 或值的节点(我的鼠标在节点上),并使用与我相同的方式从该节点突出显示到根节点悬停。

那么哪个想法更好?甚至可能吗?我可以访问节点 ID 并检查字符串或访问节点值吗?如果是,我该怎么做? 我想到了这个:例如d3.selectAll("node[value='12']"); 的价值,但是这样我不知道如何用我的方法回到他的父母那里。

我用来改变颜色的方法是这个:Highlight parent path to the root

谁能帮我解决这个问题?

谢谢!

【问题讨论】:

    标签: javascript html d3.js tree nodes


    【解决方案1】:

    好的,我成功了,我在鼠标悬停时创建了一个临时变量。 id 和 value 位于节点中名为 data 的对象上,因此我必须在我想要的实际属性之前访问数据。您可以将 value 替换为 id 或仅将 data.value 替换为您想要获取的属性。

    node.on("mouseover", function(p) {
    
    if(p.data.value != "")
    { 
      var temp = p.data.value
      console.log(temp)
    }
    

    然后检查该值是否与图表上的另一个节点配对,并以与第一个节点相同的方式突出显示,但在配对节点上。

    【讨论】:

      猜你喜欢
      • 2019-01-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-08-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多