title: Uncaught TypeError: Cannot create property 'vx' on number '1' getting this error even after deleting all nodes and svg
body: <p>I am using D3.JS V4 and trying to create a graph which I am able to draw successfully. However, when I change my mode and delete all nodes, lines, texts and even the SVG from DOM, everything gets deleted from the screen but I get this error in Console. </p>
  
  <p>This is how I am deleting</p>
  
  <pre><code> d3.select("body").selectAll("circle").remove();
      d3.select("body").selectAll("line").remove();
      d3.select("body").selectAll(".edgepath").remove();
      d3.select("body").selectAll(".edgelabel").remove();
      d3.select("body").selectAll("marker").remove();
      d3.select("body").selectAll("svg").remove();
  </code></pre>
  
  <p>This is how I am creating</p>
  
  <pre><code>  var svg  = d3.select("body").append("svg").attr("width", width).attr("height", height);
  
  
  
  
  
  
  //var svg = d3.select("svg"),
  //    width = +svg.attr("width"),
  //    height = +svg.attr("height");
  
  console.log(width);
      console.log(height);
  
  
  var color = d3.scaleOrdinal(d3.schemeCategory10);
  
  var simulation = d3.forceSimulation()
      .force("link", d3.forceLink().id(function(d) { return d.id; }).distance(300))
      .force("charge", d3.forceCollide(50.0))
          .force("x", d3.forceX(function(d){
              if(d.group === 1){
                  return width/3
              } else if (d.group === 2){
                  return 2*width/3
              } else {
                  return width/2
              }
          }))
      .force("y", d3.forceY(height / 2))
      .force("center", d3.forceCenter(width / 2, height / 2));
  
  
  
    node = svg.selectAll("circle")
              .data(nodes)
              .enter()
              .append("g")
              .attr("class", "node")
              .call(d3.drag()
                      .on("start", dragstarted)
                      .on("drag", dragged)
                      //.on("end", dragended)
              );
  
    node.append("circle")
      .attr("r", 20)
         .style("fill", function (d, i) {
            // console.log("yes", d);
                  if(d['group']==4){
                  return color(4) }
                  else if(d['group']==1)
                  { return color(1); }
                   else if(d['group']==2)
                  { return color(2); }
                  return color(2)
              })
      .style("stroke", "black")
      .style("stroke-width", "1px");
  
  
  
     link = svg.selectAll("line")
              .data(edges_)
              .enter()
              .append("line")
              .attr("class", "link")
              .attr('marker-end','url(#arrowhead)')
  
          link.append("title")
              .text(function (d) {return d.label;});
  
          edgepaths = svg.selectAll(".edgepath")
              .data(edges_)
              .enter()
              .append('path')
              .attrs({
                  'class': 'edgepath',
                  'fill-opacity': 0,
                  'stroke-opacity': 0,
                  'fill': 'blue',
                  'stroke': 'red',
                  'id': function (d, i) {return 'edgepath' + i}
              })
              .style("pointer-events", "none");
  
          edgelabels = svg.selectAll(".edgelabel")
              .data(edges_)
              .enter()
              .append('text')
              .style("pointer-events", "none")
              .attrs({
                  'class': 'edgelabel',
                  'id': function (d, i) {return 'edgelabel' + i},
                  'font-size': 10,
                  'fill': '#aaa'
              });
  
          edgelabels.append('textPath')
              .attr('xlink:href', function (d, i) {return '#edgepath' + i})
              .style("text-anchor", "middle")
              .style("pointer-events", "none")
              .attr("startOffset", "50%")
              .text(function (d) {return d.label})
  
  
  
  
      node.append("title")
              .text(function (d) {return d.name;});
  
          node.append("text")
              .attr("dy", -3)
              .text(function (d) {return d.name});
  
  
  
  
  
  
  
  
    svg.append('defs').append('marker')
          .attrs({'id':'arrowhead',
                 'id': 'arrowhead',
                  'viewBox': '-0 -5 10 10',
                  'refX': 25,
                  'refY': 0,
                  //'markerUnits':'strokeWidth',
                  'orient': 'auto',
                  'markerWidth': 10,
                  'markerHeight': 10,
              'xoverflow':'hidden'})
          .append('svg:path')
          .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
          .attr('fill', '#999')
          .style('stroke','none');
  
  
  
    simulation
        .nodes(nodes_)
        .on("tick", ticked);
  
    simulation.force("link")
        .links(edges_);
  
  
  
    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("transform", function (d) {return "translate(" + d.x + ", " + d.y + ")";});
  
          edgepaths.attr('d', function (d) {
              return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y;
          });
  
          edgelabels.attr('transform', function (d) {
              if (d.target.x &lt; d.source.x) {
                  var bbox = this.getBBox();
  
                  rx = bbox.x + bbox.width / 2;
                  ry = bbox.y + bbox.height / 2;
                  return 'rotate(180 ' + rx + ' ' + ry + ')';
              }
              else {
                  return 'rotate(0)';
              }
          });
      }
  
      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;
      }
  </code></pre>
  
  <p>This is the error I get</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot create property 'vx' on number '1'
        at n (VM7152 d3.v4.min.js:2)
        at VM7152 d3.v4.min.js:2
        at ce.each (VM7152 d3.v4.min.js:2)
        at e (VM7152 d3.v4.min.js:2)
        at n (VM7152 d3.v4.min.js:2)
        at Mn (VM7152 d3.v4.min.js:2)
        at Tn (VM7152 d3.v4.min.js:2)</p>
  </blockquote>
  
  <p>It does not tell the line in my code. </p>