如何使用 reactjs 基于组在 d3 有向图中设置节点样式

Question

我正在使用 d3 生成基于此示例的力导向图：Force-directed graph example in d3

我正在结合 React 实现它，其中 d3 强制有向图，reactjs 呈现可视化。

现在我想根据节点分配到的组设置节点的样式（颜色）。这是我的节点数据：

var nodes = [
{"name":"node1","group":"2"},
{"name":"node2","group":"4"},
{"name":"node3","group":"5"}]

在这个 example 中，他们实际上做了完全相同的事情，只是没有 reactjs。但是，我找不到任何明确的方法来结合 reactjs 来做到这一点。

Answer 1

理想的图形库，如 d3.js、plotly.js 只需要布局和数据。对单独节点的颜色分配是在内部完成的。但是，您可以通过这样做来完成它：

假设这是您的数据：

const nodes = [{
    "name": "Vertex 5",
    "group": "1"
  },
  {
    "name": "Vertex 9",
    "group": "4"
  },
  {
    "name": "Vertex 15",
    "group": "5"
  }
];

您需要使用 d3 api 在您的组和颜色之间创建映射。您可以通过将以下内容添加到创建节点的组件来执行此操作：

var color = d3.scaleOrdinal(d3.schemeCategory10);

然后您可以将此映射传递给负责创建有向图的组件，即在您的渲染方法中：

fill={color(d.group)}

这告诉填充属性从变量颜色的映射中获取填充，通过变量 d 查看每个节点。

如何使用 reactjs 基于组在 d3 有向图中设置节点样式

How to style nodes in d3 directed graph based on groups using reactjs

d3.js

reactjs

d3-force-directed