Отображать данные в реальном времени в текстовой метке d3.js

Question

У меня есть линейный график, который обновляется по мере того, как данные извлекаются с интервалом 5 секунд из базы данных.

https://gist.github.com/Majella/5fc4cd5f41a6ddf2df23

Я хотел бы добавить метку в правом верхнем углу графика, который будет отображать дату/время (хранится в переменной dateTimeTaken) и обновлять эту этикетку, как новые данные тянут в?

Я искал в Интернете и не могу найти пример этого в любом месте - может ли кто-нибудь помочь?

Answer 1

Это должно быть довольно просто. Основываясь на вашей сути, что-то вроде:

d3.json("getdata.php", function(error,data) { 
    data.forEach(function(d) { 
    d.dateTimeTaken = parseDate(d.dateTimeTaken); 
    d.reading = +d.reading; 
    }); 
var maxDate = d3.max(data, function(d) { return d.dateTimeTaken; } 

svg.selectAll(".timeDisplay") 
    .data([maxDate]) 
    .text(function(d) { return d; }) 
    .enter() 
    .append("text") 
    .attr("class", "timeDisplay") 
    .attr("x", width) 
    .attr("y", 0) 
    .attr("text-anchor", "end") 
    .text(dateTimeTaken); 

Поместите это в свою функцию «updateData». Учитывая, что вы получаете несколько элементов данных, вам может потребоваться выполнить вызов «d3.max()» для определения даты, которую вы хотите отобразить.