d3.js强制有向图搜索 [英] d3.js force directed graph search

问题描述

我试图在d3强制有向图示例上实现搜索功能。
当我在文本字段中输入搜索查询时，将显示相关项目，不相关的项目将淡出。

我已经实现了searchUpdate和count的方法，如下所示 jsfiddle 。

我需要一些帮助来淡化项目。目前 d3.select（svg）使整个图形消失，而 d3.select（＃+ n.id） c> d3.select（svg） code>您正在选择 SVG 画布并设置其 opacity 。你想做什么是

  d3.selectAll（circle）
  

或

  d3.selectAll（circle.node ）
  

并应用 opacity 。

然后，您要做的是使用 d3.select（＃+ n.id） code>，但这样做时，您必须在创建圈子时创建一个ID，例如

  .attr （id，function（d，i）{returncircle+ i}）
  

您没有可以选择的ID。

I am trying to implement a search function on a d3 force directed graph example. 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.

I need some help to fade the items. Currently d3.select("svg") fades the whole graph, while d3.select("#"+n.id) produces an error.

解决方案

When you d3.select("svg") you're selecting the SVG canvas and setting its opacity. What you want to do is

    d3.selectAll("circle") 

or

   d3.selectAll("circle.node") 

and apply the opacity there.

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

  .attr("id", function(d,i) {return "circle"+i})

Otherwise you don't have an id to select with.

这篇关于d3.js强制有向图搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！