Uncaught TypeError：即使删除所有节点和svg，也无法在数字“ 1”上创建属性“ vx”，但出现此错误

Question

我正在使用D3.JS V4，并试图创建一个能够成功绘制的图形。但是，当我更改模式并从DOM中删除所有节点，行，文本甚至SVG时，所有内容都会从屏幕上删除，但是在控制台中却收到此错误。

这就是我要删除的方式

 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();

这就是我的创造方式

  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 < 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;
    }

这是我得到的错误

  

未捕获的TypeError：无法在数字“ 1”上创建属性“ vx”       在n（VM7152 d3.v4.min.js：2）       在VM7152 d3.v4.min.js：2       在ce.each（VM7152 d3.v4.min.js：2）       在e（VM7152 d3.v4.min.js：2）       在n（VM7152 d3.v4.min.js：2）       在Mn（VM7152 d3.v4.min.js：2）       在Tn（VM7152 d3.v4.min.js：2）

它不告诉我代码中的这一行。