Question

我只有一个简单的数字列表，即使用setInteval（）函数调用update（）。而不是在每次调用后删除数字，而只是将其附加。我尝试使用d3.select（“g”）。remove（），但这也不起作用。有人可以解释这一点，并更好地解释enter（）和exit（）方法，因为我很难绕过这些调用。

var svg = d3.select("#first").append("svg")
  .attr("width",500)
  .attr("height", 500);

function update(data) {

  var text = svg.select("g")
  .data(data);

  text.enter()
  .append("text")
  .text(function(d) {
    return d;
  });
  text.exit().remove();
}



setInterval(function() {
  var data = [];
  for (var i = 0; i < 5; i++) {
    data[i] = Math.round(Math.random() * 10);
  }
  console.log(data);
  update(data);
}, 2000);

Answer 1

这里的问题是没有单独的“输入”和“更新”选项（除此之外，你没有正确地将文本附加到SVG，所以我稍微改变了你的代码。）

在这里绑定数据：

var text = svg.selectAll(".myText")
    .data(data);

这是你的“退出”选择（因为你data.length总是一样的，你甚至不需要这个选择）：

text.exit()
    .remove();

现在出现了变化。这是您的输入选择（同样，当您data.length始终为5时，“enter”仅在您第一次调用该函数时有效）：

text.enter()
    .append("text")
    .attr("class", "myText")
    .attr("x", function(d,i){ return 20 + i*16})
    .attr("y", 20);

这是您的更新选择：

text.text(function(d) {
    return d;
 });

以下是工作代码：

var svg = d3.select("body").append("svg")
  .attr("width",200)
  .attr("height", 100);

function update(data) {

  var text = svg.selectAll(".myText")
  .data(data);
	
	text.exit().remove();

  text.enter()
  .append("text")
	.attr("class", "myText")
	.attr("x", function(d,i){ return 20 + i*16})
	.attr("y", 20);
	
	text.text(function(d) {
    return d;
  });
  
}



setInterval(function() {
  var data = [];
  for (var i = 0; i < 5; i++) {
    data[i] = Math.round(Math.random() * 10);
  }
  update(data);
}, 2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

PS：我在这里使用D3 v3。

D3 Javascript：删除和更新元素

1 个答案: