[英]d3.js force directed graph search
I am trying to implement a search function on a d3 force directed graph example. 我试图在d3力导向图示例上实现搜索功能。 When I type in the search query in the text field, relevant items will be shown and the irrelevant ones will fade out. 当我在文本字段中输入搜索查询时,将显示相关项目,并且不相关的项目将淡出。
I have implemented the methods searchUpdate and count as shown in the following jsfiddle . 我已经实现了方法searchUpdate和count,如下面的jsfiddle所示。
I need some help to fade the items. 我需要一些帮助来淡化物品。 Currently d3.select("svg")
fades the whole graph, while d3.select("#"+n.id)
produces an error. 目前d3.select("svg")
淡化整个图形,而d3.select("#"+n.id)
产生错误。
When you d3.select("svg")
you're selecting the SVG
canvas and setting its opacity
. 当你d3.select("svg")
你选择了SVG
画布并设置了它的opacity
。 What you want to do is 你想做的是
d3.selectAll("circle")
or 要么
d3.selectAll("circle.node")
and apply the opacity
there. 并在那里应用opacity
。
Then what you want to do is select the circles that match by ID using d3.select("#"+n.id)
but to do so you'll have to create an id when you create the circles, like 那么你想要做的是使用d3.select("#"+n.id)
选择与ID匹配的圆圈,但要这样做,你必须在创建圆圈时创建一个id,比如
.attr("id", function(d,i) {return "circle"+i})
Otherwise you don't have an id to select with. 否则,您没有要选择的ID。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.