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

Question

我正在构建一张地图，上面的气泡代表推文。每隔一段时间，我都会使用 d3.json 询问服务器是否有新的推文，它会 returns 我新推文的位置。

我绑定了这个数组，只包含使用 selectAll.()data() 的新位置，并希望它们在每个带有新数据的新请求中出现在 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

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

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

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

d3.js selection's enter() section gets called only once

javascript

d3.js