如何使用 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); 

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

fill={color(d.group)}

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