Nodes and links in D3 (React): How to connect nodes through my links?

Question

We're trying to connect our nodes but it doesn't work. The nodes are beeing displayed but not their connections(links).

This is our code:

 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 function:

  render() {

    return (
        <div>

          <g ref="anchor" />

        </div>
    );
  }

And this is how our companyNodes and links Object looks like: https://ibb.co/b5bsRLg

So the connection is between "from_id" and "to_id"

And we don't know what we're doing wrong. Maybe someone can help

Probably there's something wrong with the

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

method but we can't figure it out.

Answer 1

We found our mistakes and maybe it could help someone.

This...

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

...had to be changed to this:

 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

And the other thing was that we had to rename every from_id to source and to_id to target because it seems like d3 is only working with source and target