如何在 d3js 中按不同组为链接着色

Question

我正在尝试使用 d3 网络，here 中有一个非常有趣的示例。它通过不同的颜色显示不同群体之间的关系。现在我想通过给 link 着色来改变它。理想情况下，我希望 link 颜色因不同的组而不同。我可以通过修改link中提供的js代码来实现吗？

提前致谢非常想知道答案。

Answer 1

这个呢？ http://bl.ocks.org/maurizzzio/37569cdc0ed9fee40ba3

相关变更：

1) stroke 保存一条线的颜色，每个 link 都有 source/target 节点的信息，要检查它们是否属于同一组，必须进行以下检查被制作：graphs.nodes[d.source].group === graphs.nodes[d.target].group 但是强制布局在调用时改变了 graphs.links 的结构，我可以使用 d.source.group 和 d.target.group 访问该组，现在如果这两个组都是相同则线条的笔画与source/target节点

的颜色相同

2) 如果不是，则 link 位于属于不同组的节点之间，向每个 link 添加一个 class 以应用灰色描边

.attr('stroke', function (d) {
  if (d.source.group === d.target.group) {
    return color(d.source.group);
  } else {
    d3.select(this).classed('different-groups', true);
  }
})

css:

.different-groups {
  stroke: #999;
}

如何在 d3js 中按不同组为链接着色

How to colour the links by different group in d3js

javascript

social-networking

d3.js