Я следовал за гидом от Майка Бостона.
https://gist.github.com/mbostock/1642874
И что я хочу, так это движущуюся линию, как в этой скрипке, которую я нашел.
Моя проблема в том, что его легко обрабатывать с помощью форматированных статических данных из CSV или чего-то еще.
Но я получаю свои данные через php из базы данных mssql и храню их в переменных.
// Get the data
<php php echo "data=" .$json_data.";" ?>
data.forEach(function(d) {
d.Datum = parseDate(d.Datum);
d.Temp = +d.Temp;
})
json выглядит, например, так с 80 пунктами из моего выбора sql:
$ sth = $ dbh-> prepare («ВЫБЕРИТЕ ТОП 80 Datum, Temp, OfenNr и т. д.»
[{"Datum":"2016-03-03 14:19:15.000","Temp":"23.25","OfenNr":"1"},{"Datum":"2016-03-03 14:19:08.000","Temp":"23.25","OfenNr":"1"},{"Datum":"2016-03-03 14:19:01.000","Temp":"23.0","OfenNr":"1"},{"Datum":"2016-03-03 14:18:55.000","Temp":"23.25","OfenNr":"1"}]
Я получаю эти данные в интервале, который я хочу.
Итак, вопрос в том, как подтолкнуть мои заданные новые точки данных в мой линейный график ???
function next () {
return {
Datum: function(d) { return d.Datum },
Temp: function(d) { return d.Temp }
};
}
tick();
function tick() {
transition = transition.each(function () {
// update the domains
x.domain(d3.extent(data, function(d) { return d.Datum; }));// push a new data point onto the back
data.push(next());
// redraw the line, and slide it to the left
path.attr("d", line)
.attr("transform", null);
// slide the x-axis left, rescale the y-axis
axis.call(x.axis);
yAx.call(y.axis);// slide the line left
path.transition()
.attr("transform", "translate(" + x - 1 + ")");
// pop the old data point off the front
data.shift();
}).transition().each("start", tick);
Моя проблема в том, как работать с данными JSON.
Задача ещё не решена.
Других решений пока нет …