Question

我正在尝试在D3js中创建一个固定的图形。节点和链接如下。它是一个无向图。我的目标是显示相同年龄的所有节点。显示的链接应仅在这些节点之间。例如，如果我单击一个复选框以显示23岁的所有节点，则显示的节点应为：

克里斯（1），
蒂纳（2），
Mary（5），
罗（6），
CS（9）

显示的链接应为

{'source': 7, 'target': 1, 'value': '1'}，
{'source': 9, 'target': 1, 'value': '1'}，
{'source': 5, 'target': 8, 'value': '1'}，
{'source': 5, 'target': 2, 'value': '1'}，
{'source': 2, 'target': 1, 'value': '1'}，
{'source': 5, 'target': 1, 'value': '1'}，
{'source': 5, 'target': 6, 'value': '1'}，
{'source': 5, 'target': 9, 'value': '1'}，
{'source': 5, 'target': 4, 'value': '1'}，

这里针对source和target的数字是chris被指定为1，tina为2的节点的计数，依此类推。该数字基于它在节点列表中显示的顺序完成。

数据=

{nodes: [{‘name’: ‘chris’ , ‘age’: 23 , ‘group’: 0}, {‘name’: ‘tina’ , ‘age’: 23 , ‘group’: 1},{‘name’: ‘shawn’ , ‘age’: 29 , ‘group’: 0}, {‘name’: ‘alex’ , ‘age’: 25 , ‘group’: 0} , {‘name’: ‘Mary’ , ‘age’: 23 , ‘group’: 0}, {‘name’: ‘ronaldo’ , ‘age’: 23 , ‘group’: 0}, {‘name’: ‘kaka’ , ‘age’: 25 , ‘group’: 0}, {‘name’: ‘cent’ , ‘age’: 25 , ‘group’: 0}, {‘name’: ‘cs’ , ‘age’: 23 , ‘group’: 4}],
links: [{'source': 7, 'target': 1, 'value': '1'}, {'source': 9, 'target': 1, 'value': '1'}, {'source': 5, 'target': 8, 'value': '1'},{'source': 3, 'target': 7, 'value': '1'} {'source': 5, 'target': 2, 'value': '1'}, {'source': 2, 'target': 1, 'value': '1'},{'source': 3, 'target': 4, 'value': '1'}, {'source': 8, 'target': 1, 'value': '7'}
{'source': 5, 'target': 1, 'value': '1'}, {'source': 5, 'target': 6, 'value': '1'}, {'source': 5, 'target': 9, 'value': '1'}, {'source': 5, 'target': 4, 'value': '1'}, {'source': 7, 'target': 4, 'value': '1'}]}

在搜索时，我遇到了代码以减少其他节点的不透明度，但这不是我想要的。

我希望不符合条件的节点和边缘消失。

另一个类似的问题是： How to approach filtering nodes and edges rendered via d3.js according to user preference? 他们仅举了3个节点的例子，静态地写了要显示的节点。我必须采取用户输入并相应地过滤掉。

Answer 1

您可以使用exit（）和enter（）方法动态更新Graph。您必须将数据绑定到图表。

这是一个简单的例子：

let age = 23
var bars = d3.selectAll(".bar")
.data(nodes.filter((d)=> d.age == age), function(d){return d.name})

bars.exit().remove()
bars.enter().append("rect")
            .attr("class", "bar")
            .attr("x", ...)
            .attr("y", ...)

Answer 2

要根据年龄= 23 critera过滤节点，您可以使用

var gnodes = svg.selectAll('g.gnode')

    .data(graph.nodes.filter((d)=> d.age == '23', function(d){return d.name}))

    gnodes.exit().remove()
    gnodes.enter()
    .append('g')
    .classed('gnode', true);

对于链接，您只想将那些同时具有源和目标的链接保留为23岁的节点，因此为此

  var link = svg.selectAll(".link")

  .data(graph.links.filter((d) => (d.target.age == "23" && d.source.age == "23" ), function(d){return d.source}))
    .enter().append("line")

    .attr("class", "link");

您可以使用console.log(graph.links)更好地了解底层数据结构，这样做可以使调试变得更加容易。

使用javascript过滤D3js中的节点及其对应的边缘

2 个答案: