раздел ввода d3.js select() вызывается только один раз

Question

Я строю карту, на которой пузырьки представляют твиты. Время от времени я спрашиваю, есть ли новые твиты с сервера, используя d3.json, и он возвращает мне местоположения новых твитов.

Я связываю этот массив, содержащий только новые местоположения, используя selectAll.()data() и ожидаю, что они будут в разделе enter() каждого нового запроса с новыми данными. Но я получаю только один раз, событие, хотя соединение данных, похоже, работает.

добавить Everyting на группу 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 в качестве ключа в вашем случае.