D3 V4树搜索和突出显示

时间:2018-08-24 22:36:19

标签: javascript loops d3.js tree

因此,我非常喜欢Jake Zieve的示例,如下所示:https://bl.ocks.org/jjzieve/a743242f46321491a950

基本上,在搜索术语时,该节点的路径会突出显示。我想完成类似的事情,但要注意以下几点:

  1. 我想继续使用D3 v4。
  2. 我担心在下一个节点拾取时无法清除路径的情况,或者当有两个相同节点时会发生什么情况 名称(理想情况下,我想突出显示所有路径)
  3. 我想使用JQuery避免使用

给定一个搜索词(假设您已经从某个地方获取了字符串),我知道我需要专门使用以下几行(您可以在评论中看到我的意识流),但是我只是没有非常确定从哪里开始。

// Returns array of link objects between nodes.
var links1 = root.descendants().slice(1); //slice to get rid of company.
console.log(links1); //okay, this one is nice because it gives a depth number, this describes the actual link info, including the value, which I am setting link width on. 
var links2 = root.links(); // to get objects with source and target properties. From here, I can pull in the parent name from a selected target, then iterate again back up until I get to source. Problem: what if I have TWO of the same named nodes??? 
console.log(links2);

对此有何想法?我会继续努力,但会遇到障碍。我的代码可以在这里找到:https://jsfiddle.net/KateJean/7o3suadx/

[更新] 我能够向links2添加一个过滤器以回调特定条目。看到 例如:

var searchTerm = "UX Designer"
var match = links2.filter(el => el.target.data.name === searchTerm); //full entry
console.log(match);

该条目为我提供了所有相关信息,包括备份到“ COMPANY”的所有点的完整列表

因此,我可以获取数据。我认为完成我想要的工作的最好方法是以某种方式向这些元素中的每个元素添加一个类,然后在该“活动”类上进行样式设置。

谢谢!

0 个答案:

没有答案