Question

我有一个强制定向图表，工作正常。作为下一步，我试图使节点大小与它的度数成比例。

我尝试了多次，但无济于事。

第一种方法：

我的数据存储在名为 d3GraphData 的变量中。我试图在第一个节点上使用 foreach（）函数，然后是链接。对于每个节点，我引入了新的属性 inDegree 和 outDegree 。在此之后，我遍历每个链接;对于每个 d.source ，我增加 outDegree ，对于每个 d.target ，我增加 inDegree < / p>

             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;
  });

这是更新的小提琴link

尝试多种方法使力导向图的节点大小与其成比例

1 个答案: