D3.js: рисовать простой, обновляемый линейный график?

Question

Я пытаюсь нарисовать простой линейный график в D3, но с несколькими проблемами.

Я хочу, чтобы график был динамическим - поэтому, когда данные обновляются, я хотел бы, чтобы график переходил на новые значения. Поэтому мне нужно использовать D3-переходы где-то в моем коде, и я не могу найти хороший пример этого с линейным графиком.

Вот некоторые из частей моего кода. На данный момент это ничего не рисует.

var data = [ 
{ 
    "air_produced": 0.660985, 
    "air_used": 0.342706, 
    "datestr": "2012-12-01 00:00:00", 
    "energy_used": 0.106402 
} ... ]; 
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S"); 
data.forEach(function(d) { 
    d.date = parseDate.parse(d.datestr); 
}); 

var x = d3.time.scale().range([0, width]); 
var y = d3.scale.linear().range([height, 0]); 

var line = d3.svg.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.energy_used); }); 

// How to draw the line? 
var linegraph = d3.select("path.line").datum(data); 
line.transition().duration(1000).attr("d", line); 
linegraph.enter().append("path") 
    .attr("class", "line") 
    .attr("d", line); 

JSFiddle здесь с полным графиком: http://jsfiddle.net/zNX8p/

Answer 1

получил его (я думаю):

var linegraph = svg.selectAll("path.line").data([data], function(d) { return d.date; }); 

linegraph.transition().duration(1000).attr('d', line); 

linegraph.enter().append("path") 
    .attr("class", "line") 
    .attr("d", line); 

datum не возвращает enter выбор, так что вы должны передать данные через data вместо.

Answer 2

У d3 есть общий шаблон обновления, который вы должны использовать для этого случая.

Соглашение состоит в том, чтобы иметь две функции: одну для настройки визуализации, а другую - для сбора данных и обновления визуализации.

Функция обновления принимает новые данные, связывает ее, обновляет график и затем добавляет или удаляет объекты по мере необходимости.

Майк Босток имеет большой 3 части серии, объясняющее это, которое вы можете найти здесь: https://twitter.com/mbostock/status/252496768267333632