Neo4j/React: Parsing Neo4j Results for use in React

问题

Before I go down this rabbit trail I want to make sure I am heading down the right trail. The query from Neo4j is returning the following:

"data": {
    "action": [
      {
        "action": "Changed",
        "timestamp": 1499348050000,
        "object": [
          {
            "filename": "C:/Users/Public/Desktop/word.doc"
          }
        ],
        "Second": [
          {
            "time": 1499348050
          }
        ]
      }

Now I would like to generate a Force Directed graph with the results above. The action node would have lines to the object and second node. However, all the examples that I have reviewed have simple examples with static data that is split up into nodes and relationship; how convenient. Unfortunately, in the real world such convenience does not exists.

So the rabbit trail I am attempting to go down is to first parse the results into nodes and relationship. However, I am not so sure how to go about doing that. Please remember I am using React. Any suggestions would be greatly appreciated. I am taking this route of asking first before starting down a trail because before I would just venture and waste time.

I found this code that I would like to use but not sure where to start (https://medium.com/walmartlabs/d3v4-forcesimulation-with-react-8b1d84364721):

class MyGraph extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        nodes: props.nodes,
      links: props.links
    };
  }

  componentDidMount() {
    this.force = d3.forceSimulation(this.state.nodes)
      .force("charge",
        d3.forceManyBody()
          .strength(this.props.forceStrength)
      )
      .force("link",
        d3.forceLink().distance(this.props.linkDistance).links(this.state.links)
      )
      .force("x", d3.forceX(this.props.width / 2))
      .force("y", d3.forceY(this.props.height / 2));

    this.force.on('tick', () => this.setState({
        links: this.state.links,
        nodes: this.state.nodes
    }));
  }

  componentWillUnmount() {
    this.force.stop();
  }

    render() {
    return (
        <svg width={this.props.width} height={this.props.height}>
        {this.state.links.map((link, index) =>(
          <line
            x1={link.source.x}
            y1={link.source.y}
            x2={link.target.x}
            y2={link.target.y}
            key={`line-${index}`}
            stroke="black" />
        ))}
        {this.state.nodes.map((node, index) =>(
            <circle r={node.r} cx={node.x} cy={node.y} fill="red" key={index}/>
        ))}
      </svg>
    );
  }
}

MyGraph.defaultProps = {
  width: 300,
  height: 300,
  linkDistance: 30,
  forceStrength: -20
};

const nodeCount = 100;
const nodes = [];
for (let i = 0; i < nodeCount; i++) {
  nodes.push({
    r: (Math.random() * 5 ) + 2,
    x: 0,
    y: 0
  });
}

const links = [];
for (let i = 0; i < nodeCount; i++) {
  let target = 0;
  do {
    target = Math.floor(Math.random() * nodeCount);
  } while(target == i)
  links.push({
    source: i,
    target
  });
}

console.log(links);

ReactDOM.render(
  <MyGraph nodes={nodes} links={links} />,
  document.getElementById('container')
);

来源：https://stackoverflow.com/questions/51886083/neo4j-react-parsing-neo4j-results-for-use-in-react