How can I make a d3 force-directed graph recalculate its data after new data is inserted?

How do I make d3 format the newly inserted data correctly?

I am rendering a d3 force-directed graph. Double clicking on a node queries the server for connected nodes, which then get loaded back into the visualization.

The new links which are returned to the visualization are different than the original links which were created when the graph was initialized.

originalLink {
  id: "link1",
  index: 0,
   source: {
   color: "red",
   id: "node1",
   index: 0,
   name: "foo",
   vx: -0.06225449869763612,
   vy: -0.03959846823888954,
   x: 370.82436128143144,
   y: 280.0751827341487,
  },
  target: {
   color: "blue",
   id: "node2",
   index: 1,
   name: "bar",
   vx: -0.0624571225601514,
   vy: -0.039687630351824134,
   x: 368.8209911223153,
   y: 247.40939254717912,
  }
}


newLink: {
 id: "newLink1"
 source: "newNode1"
 target: "node2"
}

As far as I can tell, this formatting gets done here

let linkForce = d3.forceLink().id(link => link.id)

Here's a fiddle with a simplified version. New nodes and links are added in the application controller https://ember-twiddle.com/9059457d928f3e219d7370dc0e6f4d10?openFiles=controllers.application.js%2Ctemplates.components.force-graph.hbs

When new nodes/links are added, I am getting Uncaught TypeError: Cannot create property 'vx' on string 'node2'