CODEWITHSUNDEEP
javascriptd3.js
Nikita Pestrov
Nikita Pestrov

Reputation: 5966

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

I'm building a map on which bubbles represent tweets. Every once in a while I ask if there are new tweets from server, using d3.json and it returns me locations of new tweets.

I bind this array, containing only new locations using selectAll.()data() and expect them to be in the enter()section on each new request with new data. But I only get there once, event though the data join seems to work.

I add everyting on the svg group that I've created like this:

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

Then I add the circles the following way:

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

So, while the first log displayed all the time, with new data from array, the second one only once.

Is there some fundamental misunderstanding of d3.js framework here, or just some minor bug of mine?

The page that proves this behavior is the following:example

Upvotes: 2

Views: 490

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

You're logging in two completely different contexts -- first in the key function of the data join and then in the enter selection. The first log will be called at least once per element in the data array as the purpose of that function is to return a key that tells D3 how to match data and DOM elements. The second will be called once for every new data element (i.e. it couldn't be matched to an existing DOM element).

If not all of the elements that you expect show up in the enter selection, you need to adjust your key function -- in particular, I would use tweet.tid as the key in your case.

Upvotes: 1

Related Questions