Question

我有N个DOM节点内联显示并遵循自然文档流程。一些节点与SVG线可视地连接。

我的数据看起来像这样：

nodes: [node1, node2, node3, node4, node5, ...]

links: {
    link1: [node1, node2],
    link2: [node3, node4],
    link3: [node3, node5],
    ...
}

当文档重排时，SVG行应该正确更新。

我应该如何使用React来解决这个问题？

Answer 1

嗯，你很幸运。没有评论。

CODEPEN

No dependencies other than react v0.14.0-rc1 and react-dom

Answer 2

如果这仍然是实际的，您可以使用react-sigma显示包含数据（节点和链接可变量）的网络图，考虑到每个节点都有属性＆＃34; id＆＃34;：

import {Sigma, RandomizeNodePositions, RelativeSize, ForceAtlas2} from 'react-sigmajs'
...
render() {
  let edges = Object.keys(links).map(id => ({id, source: links[id][0].id, target: links[id][1].id}))
  return <Sigma graph={{nodes, edges}}>
    <RandomizeNodePositions/>
    <RelativeSize initialSize={10}/>
    <ForceAtlas2/>
  </Sigma>
}

＆＃13;

let graph = {nodes: [{id: "n1"}, {id:"n2"}], edges: [{id:"e1", source:"n1", target:"n2"}]}
let Graph = React.createElement(Sigma.Sigma, {graph}, [
	React.createElement(Sigma.RandomizeNodePositions, {key: 0}), 
	React.createElement(Sigma.RelativeSize, {initialSize:10, key: 1}), 
	React.createElement(Sigma.ForceAtlas2, {key: 2}), ])
ReactDOM.render(
  Graph,
  document.getElementById('root')
);

＆＃13;

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://unpkg.com/react-sigma@1.2/dist/react-sigma.js"></script>
<div id="root"></div>

＆＃13;

React - 使用DOM节点和SVG行渲染图形

2 个答案: