D3 (React) 中的节点和链接：如何通过我的链接连接节点？答案

【问题标题】：Nodes and links in D3 (React): How to connect nodes through my links?D3 (React) 中的节点和链接：如何通过我的链接连接节点？
【发布时间】：2020-03-25 21:37:11
【问题描述】：

我们正在尝试连接我们的节点，但它不起作用。正在显示节点，但不显示它们的连接（链接）。

这是我们的代码：

 CreateNodesAndLinks() {
    let canvas = d3.select(this.refs.anchor)
    let width = 800
    let height = 600


    let companyNodes = Object.values(this.state.data.CompanyNodes)
    let links = Object.values(this.state.data.Links)

    companyNodes = this.filter_array_values(companyNodes)
    links = this.filter_array_values(links)

    console.log(companyNodes)
    console.log(links)

    const simulation = d3.forceSimulation(companyNodes)
      .force("link", d3.forceLink(links))
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(width / 2, height / 2));

    const svg = canvas.append("svg")
      .attr("viewBox", [0, 0, width, height]);

    const link = svg.append("g")
      .attr("stroke", "#999")
      .attr("stroke-opacity", 0.6)
      .selectAll("line")
      .data(links)
      .join("line")
      .attr("stroke-width", item => Math.sqrt(item.percent_share));

    const companyNode = svg.append("g")
      .attr("stroke", "#fff")
      .attr("stroke-width", 1.5)
      .selectAll("circle")
      .data(companyNodes)
      .join("circle")
      .attr("r", 5)
      .attr("fill", "black")
      .call(this.drag(simulation));

    companyNode.append("title")
      .text(item => item.company_id);

    simulation.on("tick", () => {
      link
        .attr("x1", d => d.from_id.x)
        .attr("y1", d => d.from_id.y)
        .attr("x2", d => d.to_id.x)
        .attr("y2", d => d.to_id.y);

      companyNode
        .attr("cx", d => d.x)
        .attr("cy", d => d.y);
    });

    return svg.node();
  }

渲染函数：

  render() {

    return (
        <div>

          <g ref="anchor" />

        </div>
    );
  }

这就是我们 companyNodes 和 links 对象的样子：https://ibb.co/b5bsRLg

所以连接是在“from_id”和“to_id”之间

而且我们不知道我们做错了什么。也许有人可以帮忙

可能有问题

simulation.on("tick", () => {
          link...

方法，但我们无法弄清楚。

【问题讨论】：

为什么要在 g 元素上设置笔画？
我们对这个很陌生，所以我们只是尝试了一些来自互联网的代码，它工作了。但是如果我们想显示链接，它就不起作用了。但是我们发现了我们的错误。我将把解决方案留在答案部分。

标签： javascript reactjs d3.js svg data-visualization

【解决方案1】：

我们发现了我们的错误，也许它可以帮助某人。

这...

 const simulation = d3.forceSimulation(companyNodes)
          .force("link", d3.forceLink(links))

...必须改成这样：

 const simulation = d3.forceSimulation(companyNodes)
      .force("link", d3.forceLink(links).id(d => d.company_id))  //company_id is the identifier for one specific company we have in companyNodes

另一件事是我们必须将每个 from_id 重命名为 source 和 to_id 重命名为 target，因为似乎 d3 仅适用于 source 和 target

【讨论】：