Javascript D3，删除。输入created div"；气泡。选择全部（”圆圈“）。移除（）&引用；_Javascript_D3.js

Javascript D3，删除。输入created div"；气泡。选择全部（”圆圈“）。移除（）&引用；

javascript d3.js

Javascript D3，删除。输入created div"；气泡。选择全部（”圆圈“）。移除（）&引用；,javascript,d3.js,Javascript,D3.js,我是d3JS新手，自学成才我计划做的是，创建圆并在创建后擦除，然后在800毫秒后，像wise那样再次创建我需要知道，我做错了什么 <html> <head> <script src="http://d3js.org/d3.v3.min.js"></script> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body>

我是d3JS新手，自学成才

我计划做的是，创建圆并在创建后擦除，然后在800毫秒后，像wise那样再次创建

我需要知道，我做错了什么

<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script>


     var bubble = d3.select("body")
        .append("svg")
        .attr("width", '400px')
        .attr('height', '400px')
        .selectAll(".circle");
        //animat();
        function animat(){    

        bubble.data([1,2,3,4,5])
        .enter()
        .append("circle")
        .attr("cx", function(d,i) {
          return d*10*(i+1);
        })
        .attr("cy", function(d,i) {
          return d*10*(i+1);
        })
        .attr("r", function(d,i) {
          return (i+1)*d*5;
        })
        .attr("fill", 'rgba(200,200,300,0.4)');
         d3.select("body")
        .append("svg")
        .attr("width", '400px')
        .attr('height', '400px');
    bubble.selectAll("circle").remove(); // I want to erase the whole svg content , so that next run will create once again, Is it Wrong ? 

        }

        setInterval(animat, 1800);

  </script>
</body>
</html>

我认为问题在于您使用的气泡变量

.selectAll(".circle")

在开始的时候它指的是一个类，后来呢

.selectAll("circle")

选择所有圆。打电话

bubble.selectAll("circles").remove()

当它在内部读取时，可以将其加倍

d3.select("body").selectAll(".circle").selectAll("circle").remove()

请尝试以下操作：

var bubble = d3.select("body")
    .append("svg")
    .attr("width", '400px')
    .attr('height', '400px');

bubble.selectAll("circle").data([1,2,3,4,5])
    .enter()
    .append("circle")
    .attr("cx", function(d,i) {
      return d*10*(i+1);
    })
    .attr("cy", function(d,i) {
      return d*10*(i+1);
    })
    .attr("r", function(d,i) {
      return (i+1)*d*5;
    })
    .attr("fill", 'rgba(200,200,300,0.4)');
}

以及取消使用

bubble.selectAll("circle").remove();

但是，由于您的代码目前处于状态，因此在绘制后圆会立即被删除，因此您将看不到任何内容。您可以将删除行放在函数的顶部：

function animat(){
bubble.selectAll("circle").remove();

bubble.selectAll("circle").transition().duration(1000).remove();

这会清除圆圈并绘制新的圆圈，但您不会看到任何更改，因为不会有延迟

我想你想要有某种视觉效果来删除这个圆，所以你可以这样做（同样，在你函数的顶部）：

演示：

编辑：要使其更平滑，请执行以下操作： bubble.selectAll（“圆圈”）.transition（）.duration（500）.attr（“填充”，“rgba（200300,0）”）.remove（）

演示：

bubble.selectAll("circle").transition().duration(1000).remove();