График в реальном времени D3.js не обновляется гладко - PullRequest
Новая
       37

График в реальном времени D3.js не обновляется гладко

0 голосов
/ 06 мая 2019

Я получаю данные JSON для линейного графика D3.Затем запрашивая новые данные после последней точки и concat () новые данные, обновляя строку и перемещаясь влево при каждом переходе ()

Мне нужно каждый раз пересчитывать xScale, чтобы установить новые значения времени и удалитьстарые на оси х.И ось X плавно и правильно прокручивается влево.Но когда я начинаю пересчитывать xScale, мой путь к линии останавливает плавный перевод влево и просто сразу переходит на каждый update_path ().Если я удалю xScale.domain (d3.extent (... путь плавно переходит влево, но не будет нового времени по оси X.

enter image description here enter image description here

function update_path(svg,path,dataset,xScale) {
        var last=dataset[dataset.length-1];
        var last_point=last[Object.keys(last)[0]];

        // check new data and put it
        d3.json("data.php?chartID=1&last_point="+last_point).then(function(data) {

            dataset=dataset.concat(data);

            var yScale=d3.scaleLinear()
    .domain([d3.max(dataset, function(d) { return d[Object.keys(d)[1]]; }), 0])
    .range([0, range]);

            xScale.domain(d3.extent(dataset, function(d) { return new Date(d[Object.keys(d)[0]]); }))

            var translate=dataset[0];
            var translate_point=translate[Object.keys(translate)[0]];

            var prelast=dataset[dataset.length-2];
            var prelast_point=prelast[Object.keys(prelast)[0]];

            var last=dataset[dataset.length-1];
            var last_point=last[Object.keys(last)[0]];

            var prelast_date=new Date(prelast_point);
            var last_date=new Date(last_point);
            var seconds = (last_date.getTime() - prelast_date.getTime());

            var line=prepare_line(xScale,yScale);

            // update x-axis
            var xaxis_call=d3.axisBottom(xScale).ticks().tickSize(-height);
            svg.selectAll("g.main_g").selectAll("g.x-axis")
                .transition()
                .duration(seconds)
                .ease(d3.easeLinear)
                .attr("transform", "translate(-"+ xScale(new Date(translate_point))+",100)")
                .call(xaxis_call)

            // update line
            path
                .attr("d", line(dataset))
                .transition()
                .duration(seconds)
                .ease(d3.easeLinear)
                .attr("transform", "translate(-"+ xScale(new Date(translate_point))+")")
                .on('end', function() {
                    update_path(svg,path,dataset,xScale);
                });

            dataset.shift();
        });
    }

Итак, как исправить путь линии, подлежащий обновлению, и одновременно плавно перемещаться влево при поступлении новых данных справа?

1 Ответ

0 голосов
/ 06 мая 2019

Я немного переупорядочил свой код, и ключ в моем случае для плавного перевода был .attr ('transform', null) для объекта пути. 

function update_path(svg,path,dataset,xScale) {
// get last date
var last=dataset[dataset.length-1];
var last_point=last[Object.keys(last)[0]];

// check new data and put it
d3.json("data.php?chartID=1&last_point="+last_point).then(function(data) {

    data=make_dataset(data,data_index); // add some my stuff to dataset object
    dataset=dataset.concat(data);
    for (i=0; i<data.length; i++) {
        dataset.shift();
    }
    var translate=dataset[0];
    var translate_point=translate[Object.keys(translate)[0]];

    var prelast=dataset[dataset.length-2];
    var prelast_point=prelast[Object.keys(prelast)[0]];

    var last=dataset[dataset.length-1];
    var last_point=last[Object.keys(last)[0]];

    var prelast_date=new Date(prelast_point);
    var last_date=new Date(last_point);
    var seconds = (last_date.getTime() - prelast_date.getTime());

    var line=prepare_line(xScale,yScale);
    // update x-axis
    var xaxis_call=d3.axisBottom(xScale)
    svg.selectAll("g.main_g").selectAll("g.x-axis")
        .transition()
        .duration(seconds)
        .ease(d3.easeLinear)
        .attr("transform", "translate(-"+ xScale(new Date(translate_point))+","+height+")")
        .call(xaxis_call)

    // update line
    path.attr('transform', null)
        .attr("d", line(dataset))
        .transition()
        .duration(seconds)
        .ease(d3.easeLinear)
        .attr("transform", "translate(-"+ xScale(new Date(translate_point))+")")
        .on('end', function() {
            // my custom functions for preparing Scales
            var xScale=axis_scaleTime(dataset, width);
            var yScale=axis_scaleLinear_values1(dataset, height);               
            update_path(svg,path,dataset,xScale);
        }); 
});

}

...