Question

我正在用JSON数据做D3折线图。接下来在最后一点之后请求新数据，并concat（）新数据，更新该行，并在每个transition（）上向左移动

我每次都需要重新计算xScale来放置新的时间值，并在x轴上删除旧的时间值。并且x轴正在正确正确地向左滚动。但是，当我开始重新计算xScale时，我的行路径停止向左平滑平移，并立即在每个update_path（）上跳转。如果我删除xScale.domain（d3.extent（...），路径将向左平滑过渡，但在x轴上没有新的时间。

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();
        });
    }

那么如何确定要更新的行路径并在同时从右侧获取新数据的同时平稳地向左移动呢？

Answer 1

我对代码进行了重新排序，在我看来，进行平滑转换的关键是路径对象上的.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);
        }); 
});

}

D3.js实时图形无法顺利更新

1 个答案: