我有一个可能包含大量节点的强制布局,对于图形来说太大而无法响应渲染。我认为提高系统性能的一种方法是当节点数量太大时,通过根据入度和出度消除节点来修剪图。
重新计算节点和链接列表有点麻烦,因为链接与节点数组中的索引相关,因此所有链接都需要重新构建。
能够将单个节点标记为排除(类似于某些节点固定
的方式)并让布局算法跳过这些节点似乎更优雅。这将使我能够动态选择要显示的图形子集,同时尽可能多地保留每个节点的状态(例如位置)。
有人实现过类似的事情吗?
更新:
我尝试实现过滤器建议,但遇到了一个有趣的错误。看来 filter
方法返回一个未实现 enter
的对象:
qChart apply limit:2
NODES BEF: [Array[218], enter: function, exit: function, select: function, selectAll: function, attr: function…]
NODES AFT: [Array[210], select: function, selectAll: function, attr: function, classed: function, style: function…]
Uncaught TypeError: Object [object Array] has no method 'enter'
运行以下代码以从 BEF
到 AFT
:
nodeSubset = nodeSubset.filter(function(n) { return (n.sentCount() <= limit); });
更新2:
我创建了一个jsfiddle隔离问题。这个例子实现了我对 ChrisJamesC 答案的解释。当我尝试直接实现他的建议时(将 filter
放在 data
之后),随后对 enter
的调用失败,因为 返回的对象code>filter
未定义 enter
。
目标是使布局仅选择那些具有 active == true
的节点,因此在此示例中,这意味着应排除节点 b
。
最佳答案
您可以将 selection.filter()
选项与 node.weight
属性结合使用。
您通常会做的是:
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
在这里你可以做:
var node = svg.selectAll(".node")
.data(graph.nodes)
.filter(function(d){return d.weight>3})
.enter();
您可能还必须使用相同的方法从绘图中删除指向这些节点的链接。
编辑如果您想直接在数据数组中将节点标记为事件节点(并对链接执行相同操作),您应该只过滤您提供的数据
var node = svg.selectAll(".node")
.data(force.nodes().filter(function(d) { return d.active; }));
var link = svg.selectAll(".link")
.data(force.links().filter(function(d) {
var show = d.source.active && d.target.active;
if (show)
console.log("kept", d);
else
console.log("excluded", d);
return show;
}) );
如果您想通过计算每个节点的权重来做到这一点,我仍然建议您在将节点和链接传递到图表之前执行此操作,并将节点标记为事件或不遵循特定标准,然后过滤链接根据事件节点。否则,您将不得不加载整个力导向布局以获得权重,然后过滤数据以重新加载力导向图。
关于d3.js - 基于节点度约束d3力布局图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15369146/