2

我有一个可能有大量节点的强制布局，对于图形来说太大而无法响应地呈现。我在想提高系统性能的一种方法是在节点数量太大时通过消除基于入度和出度的节点来修剪图形。

重新计算节点和链接列表有点麻烦，因为链接与节点数组中的索引相关，因此所有链接都需要重新构建。

能够将单个节点标记为排除（类似于某些节点的方式fixed）并让布局算法跳过这些节点似乎更优雅。这将允许我动态选择要显示的图形子集，同时为每个节点（例如位置）保留尽可能多的状态。

有没有人实施过这样的事情？

更新：

我试图实现过滤器建议，但遇到了一个有趣的错误。该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'

运行以下代码以获取 from BEFto AFT：

nodeSubset = nodeSubset.filter(function(n) { return (n.sentCount() <= limit); });

更新 2：

我创建了一个jsfiddle来隔离问题。这个例子实现了我对 ChrisJamesC 答案的解释。当我尝试直接执行他的建议时（将 放在filter之后data），随后的调用enter失败，因为返回的对象filter没有enter定义。

目标是使布局仅选择具有 的那些节点active == true，因此在此示例中，这意味着b应排除该节点。

4

1 回答 1

2

您可以将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;
      }) );

小提琴

如果您想通过计算每个节点的权重来做到这一点，我仍然建议您在将节点和链接传递给图表并将节点标记为活动或不遵循特定标准之前执行此操作，然后根据活动过滤链接节点。否则，您将不得不加载整个力导向布局以获得权重，然后过滤数据以重新加载力导向图。

于 2013-03-12T19:49:41.517 回答