title: Migrating from D3.js v4 to D3.js v7 not working
body: <p>I want to attempt to convert this force from D3 v4 to v7, but not sure how to go about it.The code conversion what I have done is here.
  I try to do this&lt; <a href="https://observablehq.com/@d3/d3v6-migration-guide%3E" rel="nofollow noreferrer">https://observablehq.com/@d3/d3v6-migration-guide&gt;</a></p>
  <p>D3 6.0 is out! It comes with exciting new features and improvements.</p>
  <p>It also introduces a few important API changes. But, do not fear: almost all the methods are behaving exactly as they did with v5; just a handful of them are not backwards compatible.</p>
  <p>Here's a comprehensive list of the changes you will need to watch for when you upgrade to D3 v6:</p>
  <pre><code>!DOCTYPE html&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;style&gt;
  
  .links line {
    stroke: #999;
    stroke-opacity: 0.6;
  }
  
  .nodes circle {
    stroke: #fff;
    stroke-width: 1.5px;
  }
  
  text {
    font-family: sans-serif;
    font-size: 10px;
  }
  
  &lt;/style&gt;
  &lt;svg width=&quot;500&quot; height=&quot;500&quot;&gt;&lt;/svg&gt;
  &lt;script src=&quot;https://d3js.org/d3.v7.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  const svg = d3.select(&quot;svg&quot;),
      width = +svg.attr(&quot;width&quot;),
      height = +svg.attr(&quot;height&quot;);
  
  const simulation = d3.forceSimulation()
      .force(&quot;link&quot;, d3.forceLink().id(function(d) { return d.id; }))
      .force(&quot;charge&quot;, d3.forceManyBody())
      .force(&quot;center&quot;, d3.forceCenter(width/3, height / 3));
  
  d3.json(&quot;helpme.json&quot;, function(error, graph) {
    if (error) throw error;
  
    const link = svg.append(&quot;g&quot;)
        .attr(&quot;class&quot;, &quot;links&quot;)
      .selectAll(&quot;line&quot;)
      .data(graph.links)
      .enter().append(&quot;line&quot;)
        .attr(&quot;stroke-width&quot;, function(d) { return Math.sqrt(d[2])*2; });
  
    const node = svg.append(&quot;g&quot;)
        .attr(&quot;class&quot;, &quot;nodes&quot;)
      .selectAll(&quot;g&quot;)
      .data(graph.nodes)
      .enter().append(&quot;g&quot;)
  
    const circles = node.append(&quot;circle&quot;)
      .attr(&quot;r&quot;, 6)
      .attr(&quot;fill&quot;, &quot;olive&quot;);
  
    // Create a drag handler and append it to the node object instead
    const drag_handler = d3.drag()
        .on(&quot;start&quot;, dragstarted)
        .on(&quot;drag&quot;, dragged)
        .on(&quot;end&quot;, dragended);
  
    drag_handler(node);
    
    const lables = node.append(&quot;text&quot;)
        .text(function(d) {
          return d.id;
        })
        .attr('x', 6)
        .attr('y', 3);
  
    node.append(&quot;title&quot;)
        .text(function(d) { return d.id; });
  
    simulation
        .nodes(graph.nodes)
        .on(&quot;tick&quot;, ticked);
  
    simulation.force(&quot;link&quot;)
        .links(graph.links);
  
    function ticked() {
      link
          .attr(&quot;x1&quot;, function(d) { return d.source.x; })
          .attr(&quot;y1&quot;, function(d) { return d.source.y; })
          .attr(&quot;x2&quot;, function(d) { return d.target.x; })
          .attr(&quot;y2&quot;, function(d) { return d.target.y; });
  
      node
          .attr(&quot;transform&quot;, function(d) {
            return &quot;translate(&quot; + d.x + &quot;,&quot; + d.y + &quot;)&quot;;
          })
    }
  });
  
    
  function dragstarted(event,d) {
    if (!event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }
  
  function dragged(event,d) {
    d.fx = event.x;
    d.fy = event.y;
  }
  
  function dragended(event,d) {
    if (!event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }
  
  &lt;/script&gt;
  </code></pre>
  <p>helpme.json</p>
  <pre><code>
  {
    &quot;nodes&quot;: [
      {&quot;id&quot;: &quot;A&quot;},
      {&quot;id&quot;: &quot;B&quot;},
      {&quot;id&quot;: &quot;C&quot;},
      {&quot;id&quot;: &quot;D&quot;},
      {&quot;id&quot;: &quot;E&quot;},
      {&quot;id&quot;: &quot;F&quot;}
    ],
    &quot;links&quot;: [
      {&quot;source&quot;: &quot;C&quot;, &quot;target&quot;: &quot;B&quot;, &quot;value&quot;: 2},
      {&quot;source&quot;: &quot;C&quot;, &quot;target&quot;: &quot;D&quot;, &quot;value&quot;: 3},
      {&quot;source&quot;: &quot;D&quot;, &quot;target&quot;: &quot;A&quot;, &quot;value&quot;: 1},
      {&quot;source&quot;: &quot;D&quot;, &quot;target&quot;: &quot;E&quot;, &quot;value&quot;: 1},
      {&quot;source&quot;: &quot;E&quot;, &quot;target&quot;: &quot;F&quot;, &quot;value&quot;: 1},
      {&quot;source&quot;: &quot;F&quot;, &quot;target&quot;: &quot;B&quot;, &quot;value&quot;: 4}
    ]
  }
  </code></pre>
  <p>Can someone please help me fix this?Some assistance would be amazing!
  Danke in Voraus</p>