Question

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

我使用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

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

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

d3.js选择的enter（）部分只被调用一次

1 个答案: