Question

我是d3JS的新手，并且自己学习，

我计划做的是创建圆圈并在创建后擦除，在800毫秒后，再次创建它就像它一样。

我需要知道，我在这里做错了什么。

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

这里有什么问题

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

DEMO HERE

Answer 1

我认为问题出在你的bubble-variable中，因为你使用

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

演示：http://jsbin.com/jigelipi/5/edit

编辑：使其更顺畅：。bubble.selectAll（ “圆圈”）过渡（）的持续时间（500）.attr（ “填充”， 'RGBA（200,200,300,0）'）除去（）;

演示：http://jsbin.com/jigelipi/10/edit

D3，删除.enter创建的div＆＃34; bubble.selectAll（＆＃34; circle＆＃34;）。remove（）;＆＃34;

1 个答案: