向折线图添加新的数据点条目

Adding new data point entries to a line chart

本文关键字：数据 折线图 添加      更新时间：2023-09-26

我试图添加新的数据点到图表(data2变量)，但不是附加到行，它创建一个新的行。

http://jsfiddle.net/30c8xf9s/你知道吗?

    var data = [
        {date: "2-May-15", close: 50},
        {date: "1-May-15", close: 50},
        {date: "30-Apr-15", close: 50},
        {date: "27-Apr-15", close: 60},
        {date: "26-Apr-15", close: 40},
        {date: "25-Apr-15", close: 35},
        {date: "24-Apr-15", close: 40},
        {date: "23-Apr-15", close: 30},
        {date: "20-Apr-15", close: 20},
        {date: "19-Apr-15", close: 15},
        {date: "15-Apr-15", close: 10}
    ],
    // i want to append this array after 3 seconds.
    data2 = [
        {date: "15-May-15", close: 35},
        {date: "11-May-15", close: 40},
        {date: "10-May-15", close: 30},
        {date: "5-May-15", close: 20},
        {date: "4-May-15", close: 15},
        {date: "3-May-15", close: 10}
    ],
    margin = {top: 20, right: 50, bottom: 30, left: 50},
    width = 500 - margin.left - margin.right,
    height = 950 - margin.top - margin.bottom,
    parseDate = d3.time.format("%d-%b-%y").parse,
    bisectDate = d3.bisector(function(d) { return d.date; }).left,
    formatValue = d3.format(",.2f"),
    x = d3.scale.linear()
        .range([0, width]),
    y = d3.time.scale()
        .range([height, 0]),
    xAxis = d3.svg.axis()
        .scale(x)
        .orient("top"),
    yAxis = d3.svg.axis()
        .scale(y)
        .orient("left"),
    line = d3.svg.line()
        .y(function(d) { return y(d.date); })
        .x(function(d) { return x(d.close); })
        .interpolate('cardinal'),
    svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

test(data);
setInterval(function(){ 
    test(data2);
}, 1000);
function test(data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
    });
    data.sort(function(a, b) {
        return a.date - b.date;
    });
    y.domain([data[0].date, data[data.length - 1].date]);
    x.domain(d3.extent(data, function(d) { return d.close; }));
    svg.append("g")
        .attr("class", "x axis")
        .call(xAxis);
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);
    svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);
};

您没有遵循进入、更新、退出模式。从本质上讲，append用于输入选择，然后update用于新数据的现有选择，exit用于删除数据。您正在重新添加新数据。

根据您编写代码的方式，我发现创建一个与输入test函数分开的更新函数是最容易的:

function update(data){
    // fix data
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
    });   
    // grab old data and put together
    var oldData = d3.select('.line').datum();    
    data = oldData.concat(data);      
    // keep it sorted
    data.sort(function(a, b) {
        return a.date - b.date;
    });
    // set new domains
    y.domain([data[0].date, data[data.length - 1].date]);
    x.domain(d3.extent(data, function(d) { return d.close; }));
    // update axis BUT DO NOT RE-APPEND
    svg.select(".x.axis") // change the x axis
      .call(xAxis);
    svg.select(".y.axis") // change the y axis
      .call(yAxis);
    // update line BUT DO NOT RE-APPEND
    svg.select('.line')
        .datum(data)
        .attr('d', line);    
}

例子。

相关文章：