title: d3 - "Cannot create property 'vx' on number '65'"
body: <p>So I'm trying to purpose this great example <a href="https://bl.ocks.org/mbostock/4062045" rel="noreferrer">Force-Directed Graph</a> for some very simple json: <a href="https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json" rel="noreferrer">https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json</a></p>
  
  <p>My work is here: <a href="https://codepen.io/robertotomas/pen/PmjXXO" rel="noreferrer">codepen</a></p>
  
  <p>I'm getting a never-ending feed of errors from d3 with no error at the start to suggest something wrong with my code. It starts like this:</p>
  
  <pre><code>XHR finished loading: GET "https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json".
  [...]
  d3.min.js:2 Uncaught Error: missing: 0
      at ar (d3.min.js:2)
      at r (d3.min.js:5)
      at Function.e.links (d3.min.js:5)
      at pen.js:46
      at Object.&lt;anonymous&gt; (d3.min.js:7)
      at d.call (d3.min.js:4)
      at XMLHttpRequest.e (d3.min.js:7)
  ar @ d3.min.js:2
  r @ d3.min.js:5
  e.links @ d3.min.js:5
  (anonymous) @ pen.js:46
  (anonymous) @ d3.min.js:7
  call @ d3.min.js:4
  e @ d3.min.js:7
  d3.min.js:5 Uncaught TypeError: Cannot create property 'vx' on number '66'
      at e (d3.min.js:5)
      at d3.min.js:5
      at Fe.each (d3.min.js:5)
      at e (d3.min.js:5)
      at n (d3.min.js:5)
      at yn (d3.min.js:2)
      at gn (d3.min.js:2)
  e @ d3.min.js:5
  (anonymous) @ d3.min.js:5
  each @ d3.min.js:5
  e @ d3.min.js:5
  n @ d3.min.js:5
  yn @ d3.min.js:2
  gn @ d3.min.js:2
  d3.min.js:5 Uncaught TypeError: Cannot create property 'vx' on number '66'
      at e (d3.min.js:5)
      at d3.min.js:5
      at Fe.each (d3.min.js:5)
      at e (d3.min.js:5)
      at n (d3.min.js:5)
      at yn (d3.min.js:2)
      at gn (d3.min.js:2)
  e @ d3.min.js:5
  (anonymous) @ d3.min.js:5
  each @ d3.min.js:5
  e @ d3.min.js:5
  n @ d3.min.js:5
  yn @ d3.min.js:2
  gn @ d3.min.js:2
  </code></pre>
  
  <p>I can't actually find a good introductory resource on force graphs in d3 v4+, so I must just hack at it.</p>
  
  <h3>html</h3>
  
  <pre><code>&lt;main&gt;
    &lt;section class="d3"&gt;
    &lt;/section&gt;
  &lt;/main&gt;
  </code></pre>
  
  <h3>code</h3>
  
  <pre><code>const api = 'https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json' 
  
  let root = d3.select(".d3"),
      width = +root.attr("width"),
      height = +root.attr("height")
  
  let svg = root.append('svg')
      .attr("width", width)
      .attr("height", height)
  
  let color = d3.scaleOrdinal(d3.schemeCategory20);
  
  let simulation = d3.forceSimulation()
      .force("link", d3.forceLink().id((d) =&gt; d.country))
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(width / 2, height / 2));
  
  d3.json(api, function(error, graph) {
    if (error) 
      throw error
  
    let link = svg.append("g")
      .attr("class", "links")
      .selectAll("line")
      .data(graph.links)
      .enter().append("line")
      .attr("stroke-width",  () =&gt; 4);
  
    let node = svg.append("g")
      .attr("class", "nodes")
      .selectAll("circle")
      .data(graph.nodes)
      .enter().append("circle")
      .attr("r", 5)
      .attr("fill", d =&gt; color(1))
      .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended))
  
    simulation
      .nodes(graph.nodes)
      .on("tick", ticked)
  
    simulation.force("link")
      .links(graph.links)
  
    function ticked() {
      link
          .attr("x1", function(d) { return d.source.x; })
          .attr("y1", function(d) { return d.source.y; })
          .attr("x2", function(d) { return d.target.x; })
          .attr("y2", function(d) { return d.target.y; });
  
      node
          .attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; });
    }
  })
  
  function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }
  
  function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
  }
  
  function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }
  </code></pre>