Question

我看到react-d3。最后我将它用于图表（在React之前），直到轴上的图例，边距，标签的布局需要调整才很好。在d3之上使用c3和其他库，使事情变得更容易。

现在我需要绘制图形 - 随机节点/链接/组图。我看到Force布局 - 但不是react-d3中的简单图形。我查看了Cytoscape - 它没有正式的React构建，似乎在工作中（我在堆栈溢出时找到了一个包装器，但是在使用它之前我很犹豫，直到cyto团队发布它。

因此问题是： - 如果我使用react-d3，我在哪里可以找到一些样本（不是图表而不是＆＃39; Force＆＃39;布局） - 如果直接使用react-d3有点太低级别，在d3上是一个很好的库，现在可用于React吗？（我愿意牺牲d3的超灵活性，以便于简化库）。

非常欢迎任何帮助和指示。

谢谢。

Answer 1

您可以查看以下库，

https://github.com/lavrton/react-konva

https://github.com/Flipboard/react-canvas

https://github.com/reactjs/react-art

https://github.com/alex3165/react-leaflet-draw

https://github.com/PaulLeCam/react-leaflet

Answer 2

看看react-sigma，这是一个非常强大而快速的网络图形渲染引擎。它支持WebGL和Canvas，允许自定义节点和边缘形状，具有运行动画的插件，如ForceAtlas2，Filter。它也可以使用自定义组件进行扩展。

简单用例

let graph = {
    nodes:[{id:"n1", label:"Alice"}, {id:"n2", label:"Rabbit"}], 
    edges:[{id:"e1",source:"n1",target:"n2",label:"SEES"}]}
<Sigma graph={graph}
        onOverNode={e => console.log("Mouse over node: " + e.data.node.label)}>
    <RandomizeNodePositions />
</Sigma>

从外部文件加载并运行ForceAtlas2：

<Sigma style={{width:"200px", height:"200px"}}>
  <LoadJSON path="/public/data.json">
     <ForceAtlas2 worker barnesHutOptimize barnesHutTheta={0.6} linLogMode>
  </LoadJSON>
</Sigma>

使用您自己的组件进行扩展：

class MyCustomSigma extends React.Component {
    constructor(props) {
        super(props)
        props.sigma.graph.nodes().forEach(n => { n.label = "ID:" + n.id });
    };
    render = () => null;
}
...
return  <Sigma>
    <MyCustomSigma>
</Sigma>

Answer 3

Tl; dr：尽可能避免使用react-*包装程序包（对于外部库）。除了基本的用例之外，它们往往会限制你以后的所有用途。

没有任何理由等待用于Cytoscape的React适配器。适配器是为那些想要创建非常简单（大部分）仅可视化React.Component的人而构建的 - 就像一个与科学出版物一起出现的简单页面。

通常，外部库的react-*个包往往属于以下两类之一：（1）简单库或（2）复杂库。对于（1），如果它包装的lib具有要覆盖的小特征集，则react-*包可能没问题。对于（2），这些包装器包倾向于仅覆盖API的一小部分。对于（1）和（2），您依赖于包装器是最新的 - 或者被锁定在功能之外。

随着您的应用越来越发达，您是否希望冒险进行重写，因为您的应用高度耦合到您的应用超出的react-*包装程序包？

总的来说，使用react-*包装器包没有那么多好处。特别是对于像您这样的更复杂的情况，您只需限制可以使用的功能以及如何使用它们。

无论您选择哪种图形库 - 无论是Cytoscape还是其他 - 我建议您根据应用的需要编写自己的React.Component。

就个人而言，我将使用的唯一react-*软件包是将直接添加到React中的功能，如动画，路由等。

Answer 4

以上资源已有4年的历史，因此我们认为需要更新。我会使用react-digraph或react-flow-两者都得到很好的支持。

哪个库用于绘制简单的图形节点，链接在做出反应？

4 个答案: