javascript - d3.js 选择的 enter() 部分只被调用一次

Question

我正在构建一个 map ，其中的气泡代表推文。每隔一段时间，我会使用 d3.json 询问服务器是否有新推文，它会返回新推文的位置。

我使用 selectAll.()data() 绑定(bind)这个数组，只包含新的位置，并期望它们在每个新请求的 enter() 部分中新数据。但我只到达那里一次，尽管数据连接似乎有效。

我在我这样创建的 svg 组上添加了一切:

bubbleGroup = svg.append("g").attr("class", "bubble");

然后我按以下方式添加圆圈:

  var circlesSelection = bubbleGroup.selectAll("circle")
  .data(tweets, function (tweet) {
  console.log("We have new data:");
  console.log(tweet);
  return tweet;
  });

  circlesSelection.enter()
  .append("circle")
  .attr("transform", function(tweet) {
  console.log("Gets called only once");

  return "translate(" + tweet["location"] + ")";})
  .attr("r", 5);

因此，虽然第一个日志一直显示，包含来自数组的新数据，但第二个日志只显示一次。

这里是否存在对 d3.js 框架的一些基本误解，或者只是我的一些小错误？

证明此行为的页面如下:example

Answer 1

您正在登录两个完全不同的上下文——首先是在数据连接的关键函数中，然后是在输入选择中。第一个日志将至少为数据数组中的每个元素调用一次，因为该函数的目的是返回一个键，告诉 D3 如何匹配数据和 DOM 元素。第二个将为每个新数据元素调用一次(即它无法与现有的 DOM 元素匹配)。

如果不是您期望的所有元素都出现在输入选择中，您需要调整您的键功能——特别是，我会使用 tweet.tid 作为您的情况下的键.