javascript - 尝试多种方法使力定向图的节点大小与其度数成比例

Question

我有一个力导向图，效果很好。下一步，我尝试使节点大小与其度数成正比。

我尝试了多种方法，但没有成功。

第一种方法:

我的数据存储在名为d3GraphData的变量中。我尝试在第一个节点上使用 foreach() 函数，然后是链接。对于每个节点，我引入了新属性 inDegree 和 outDegree 。之后我迭代每个链接；对于每个 d.source ，我增加 outDegree ，对于每个 d.target 我增加 inDegree

             var nodes = [];
  var links = [];

  d3GraphData.nodes = nodes;
  d3GraphData.links = links;


 nodes.forEach(function(d) {
  d.inDegree = 0;
  d.outDegree = 0;
});
links.forEach(function(d) {
  nodes[d.source].outDegree += 1;
  nodes[d.target].inDegree += 1;
});

这似乎不起作用，并且没有计算inDegree和outDegree。当我尝试在 r 属性中使用它们

     node.attr("r",function(d) {return (d.inDegree+d.outDegree) * 2;});

我得到了预期的错误:

   Error: <circle> attribute r: Expected length, "NaN".

第二种方法:

我在一些文档中读到，D3 自动计算度数并将其存储在 .weight 属性中。所以，我找到了一种使用它的方法。

      node.attr("r", function(d) {return
d3.sum(d3GraphData.links.filter(function(p) {return p.source == d || p.target
== d}), function(p) {return p.weight})})

这似乎不会生成任何 NaN 错误，但节点似乎不像第一种方法那样出现，而且我只看到链接。

可能我遗漏了一些明显的东西，但我真的很感激任何提示或意见。

下面是fiddle

Answer 1

我可以在第一种方法中使用的代码中发现一个错误。您应该使用 node 变量(d3 个节点选择)而不是使用 nodes 变量(数据数组)来设置 inDegree 和 outDegree 值。

  node.each(function(d) {
    d.inDegree = 0;
    d.outDegree = 0;
  });

  lines.each(function(d) {
    d.source.outDegree += 1;
    d.target.inDegree += 1;
  });

  node.attr("r", function(d) {
    var weight = d.inDegree ? d.inDegree : 0 + d.outDegree ? d.outDegree : 0;
    weight = weight > 25 ? 25 : (weight < 5 ? 5 : weight);
    return weight;
  });

这是更新的 fiddle link