Ad

How To Fix 'Error: Missing: 0' On D3.forceLink

I created a test case where a react component on mount creates link between two nodes. For some strange reason it throws me error Error: missing: 0

The only case when code is working and actually links the elements is when i use .force('link', d3.forceLink()) which is really strange, no clue where it looks up for the links in this case.

constructor(props) {
    super(props);
    this.graphRef = React.createRef();
    this.state = {
      nodes: [{ id: 0, title: 'Valley', type: 'ford' }, { id: 1, title: 'Valley 2', type: 'ford' }],
      links: [{ source: 0, target: 1 }],
    }; //testing data
    this.linkGroup = null;
    this.iconGroup = null;
    this.nodeGroup = null;
    this.textGroup = null;
    this.simulation = null;
  }

componentDidMount() {
    const domNode = this.graphRef.current;
    const { links } = this.state;
    const { width, height } = domNode.getBoundingClientRect();

    const svg = d3.select(domNode);
    this.linkGroup = svg.append('g').attr('class', 'links');
    this.iconGroup = svg.append('g').attr('class', 'icons');
    this.nodeGroup = svg.append('g').attr('class', 'nodes');
    this.textGroup = svg.append('g').attr('class', 'texts');

    this.simulation = d3.forceSimulation()
      .force('charge', d3.forceManyBody().strength(5))
      .force('link', d3.forceLink(links))
      .force('centerX', d3.forceX(width / 2))
      .force('centerY', d3.forceY(height / 2))
      .force('collision', d3.forceCollide().radius(25).strength(1));
    this.triggerSimulation();
  }

EDIT:

The solution that Gerardo Furtado offers is:

.force("link", d3.forceLink(links)
     .id(function(d,i) {
         return d.id
     })
    .distance(20)
    .strength(1)
)

However for some reason this doesn't work for me. In order to make the code to work for me it should be like this:

.force("link", d3.forceLink()
     .id(function(d,i) {
         return d.id
     })
    .distance(20)
    .strength(1)
)

I dont have any clue how my code find those links, but somehow it does.

Ad

Answer

I am still not sure why, but it worked with .force('link', d3.forceLink().id(link => link.id))

Ad
source: stackoverflow.com
Ad