title: Newtons Craddle using javascript . Uncaught TypeError: Cannot read property 'x' of undefined index.js.90
body: <p>I started to work on a project to make a newton's cradle using HTML, CSS, JavaScript.
  after installing npm packages like d3-force-bounce, d3-drag, d3-force-constant. I am not able to get a responsive cradle. I feel like the error is somehow linked to this line:</p>
  <pre><code>.on(&quot;drag&quot;, d =&gt; { d.fx = d3.event.x; d.fy = d3.event.y; })
  </code></pre>
  <p>I get the error saying:</p>
  <pre><code>Uncaught TypeError: Cannot read property 'x' of undefined
  </code></pre>
  <p>I'll attach the index.js file code here.</p>
  <pre><code>function ballDigest() {
      let ball = ballsG.selectAll('circle.ball').data(balls);
  
      ball.exit().remove();
  
      ball.merge(
          ball.enter().append('circle')
              .classed('ball', true)
              .attr('r', BALL_RADIUS)
              .attr('fill', 'url(#sphere-gradient)')
              .call(d3.drag()
                  .on(&quot;start&quot;, d =&gt; { d.fx = d.x; d.fy = d.y; })
                  .on(&quot;drag&quot;, d =&gt; { d.fx = d3.event.x; d.fy = d3.event.y; })
                  .on(&quot;end&quot;, d =&gt; { d.fx = null; d.fy = null; })
              )
      )
          .attr('cx', d =&gt; d.x)
          .attr('cy', d =&gt; d.y);
  }
  </code></pre>