如何根据用户偏好接近通过d3.js呈现的过滤节点和边缘？ [英] How to approach filtering nodes and edges rendered via d3.js according to user preference?

问题描述

什么是可行的过滤节点的方法

提前感谢。

解决方案

本质上，用户通过搜索特定节点名称所做的是缩小可视化显示的数据。 / p>

方法

1. 首先，您需要使用过滤缩小源数据或任何在你的情况下有意义。


2. 然后，您需要 selectAll 已经绘制的节点和加入的选择。


3. 使用d3 输入，更新和退出 ，更新和删除节点和链接。

示例

$ b b

Mike Bostock发布了一个[修改强制布局]示例（ https：//bl.ocks .org / mbostock / 1095795 ）

Link to my code (Plunker)

I am developing a network diagram in D3.js force layout for academic purpose. I have so far coded a graph which displays nodes and edges. I have an auto-complete text box in jquery where user can enter a node name.

D3.js (Only part of code. For complete code see my plunker link):

var force = d3.layout.force()
  .nodes(d3.values(nodes))
  .links(links)
  .size([width, height])
  .linkDistance(100)
  .charge(-1546)
  .on("tick", tick)
  .start();

var svg = d3.select("#schemio")
  .append('svg')
  .attr("width", width)
  .attr("height", height);

var link = svg.selectAll(".link")
  .data(force.links())
  .enter().append("line")
  .attr("class", "link");

var node = svg.selectAll(".node")
  .data(force.nodes())
  .enter().append("g")
  .attr("class", "node")
  .call(force.drag);

HTML:

<div class="ui-widget">
    <label for="tags">Filter: </label>
    <input id="tags">
</div>

Jquery (Autocomplete)

$(function() {
    $( "#tags" ).autocomplete({
      source: nodesArray
    });
});

I want a functionality where when a user enters a node name in the filter box, I need to remove all other nodes and edges in the graph and keep only that particular node and its directly associated nodes and edges (one hop).

Example:

When I type "Parent" in the filter box it has to remove all other nodes and edges and keep only "Parent" node and its direct child nodes (child1, child2, child3).

What is a viable approach for filtering nodes and edges as the user searches for particular terms?

Thanks in advance.

解决方案

In essence, what a user is doing by searching for a specific node name is to narrow the data the visualization is going to show.

The approach

1. First you need to narrow down the source data by using filtering or whatever makes sense in your situation. You end up with filtered data.
2. Then you need to selectAll the nodes that have been drawn already and join the selection with filtered data from step 1.
3. Finally use the d3 enter, update and exit selections to add, update and remove nodes and links.

Example

Mike Bostock published an example of [Modifying a Force Layout].(https://bl.ocks.org/mbostock/1095795)

这篇关于如何根据用户偏好接近通过d3.js呈现的过滤节点和边缘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！