Слияние данных в d3.js

Я Pythonista и пытаюсь изучить d3.js (улыбка).Слияние данных в d3.js

У меня есть сервер с гнездом. Моя подписка подписывается на нее. Сервер отправляет обновления как JSON '[["id0", 0.38], ["id1", 0.70], ["id8", 0.71]]'. я написал следующую простую страницу:

<!doctype html> 
<html> 
    <head> 
    <title>WebSockets</title> 
    </head> 
    <body> 
    <script src="http://d3js.org/d3.v2.js"></script> 
    <script> 
     var ws = new WebSocket("ws://localhost:9999/updates"); 
     ws.onmessage = function(message) 
     { 
     var my_data = JSON.parse(message.data); 
     var dd = d3.selectAll("#messages") 
      .append("div") 
      .selectAll("div") 
      .data(my_data) 
      .enter() 
      .append("div") 
      .attr("id",function(d){return d[0];}) 
      .text(function(d){return d[1];}) 
     } 
    </script> 
    <div id='messages'></div> 
    </body> 
</html>

Он отлично работает! WS получает данные. В div#messages он создает новый div. А затем помещает данные из msg в div#id*. Таким образом, после многих итераций у меня есть:

... 
<div id="messages"> 
    <div> 
    <div id="id0">0.83</div> 
    <div id="id1">0.06</div> 
    <div id="id2">0.33</div> 
    </div> 
    <div> 
    ... 
    </div> 
    <div> 
    ... 
    </div> 
    ... 
</div> 
...

Как изменить код, чтобы заставить его работать так:

Имея

... 
<div id='messages'> 
    <div id='id0'>0.25</div> 
    <div id='id1'>0.05</div> 
    <div id='id2'>0.25</div> 
</div> 
...

ПРИИМИ

'[["id0", 0.38], ["id1", 0.70], ["id8", 0.71]]'

Получить в результате

... 
<div id='messages'> 
    <div id='id0'>0.38</div> 
    <div id='id1'>0.70</div> 
    <div id='id2'>0.25</div> 
    <div id='id8'>0.71</div> 
</div> 
...

Я имею в виду «, если данный идентификатор в #messages затем обновить его; еще добавить его до конца».

Я мог бы сделать это с петель, но док говорит, что это должно быть сделано с enter() и exit() ..

кажется, что в этих статьях (circle, join) является написано, как это сделать. проблема заключается в том, что я не понимаю идеи синхронизации данных в этих статьях вообще. Я надеюсь, что код поможет мне понять это.

PS: Я выполняю всю логику на Python, однако я должен показывать данные на странице с минимальным перерисовкой. И все говорят, что d3 - очень легко и удобно. Я читал документы, и кажется, что d3 - хорошая структура, но у меня есть некоторые проблемы с основами.

PPS: Если данные должны быть переданы другим способом - нет никаких проблем.

UPDATE

С помощью консоли, я обнаружил, что

d3.select("#messages") 
    .select("div") 
    .selectAll("div") 
    .data([["id0",0]], function(d){return d[0];}) 
    .enter()

дает мне массив [null]

d3.select("#messages") 
    .select("div") 
    .selectAll("div") 
    .data([["id0",0]], function(d){return d[0];})

дает мне массив [HTMLDivElement] с HTMLDivElement.__data__ == ["id0",0]

d3.select("#messages") 
    .select("div") 
    .selectAll("div") 
    .data([["id0",0]], function(d){return d[0];}) 
    .exit()

дает [null, HTMLDivElement, HTMLDivElement] с "id1" и "id2" в HTMLDivElement.__data__[0] соответственно.

Любая идея Что дальше?

источник

2012-05-15 akaRem

Я нашел, что это, похоже, работает .. но что это действительно делает?

var my_data = JSON.parse(message.data); 
var my_selection = d3.selectAll("#messages") 
    .selectAll("div") 
    .data(my_data, function(d){return d[0];}) 
my_selection 
    .enter() 
    .append("div") 
    .attr("id",function(d){return d[0];}) 
my_selection 
    .text(function(d){return d[1];})

Если никто не может ответить, может быть, кто-нибудь может объяснить?

источник

2012-05-15 05:16:55 akaRem

Поскольку прошло какое-то время, вы понимаете, что делает код или вы все еще хотите объяснение? –

@arigold да, сделаю. Но если вы можете отредактировать мой ответ с дополнительной информацией, я думаю, что это будет хорошо для сообщества. – akaRem

Я думал о самом ясном и кратчайшем способе положить его и не мог сделать лучше, чем [это] (http://bost.ocks.org/mike/join/). –

Слияние данных в d3.js

ответ

Смежные вопросы