javascript - 将新数据点条目添加到折线图

Question

我正在尝试向图表添加新数据点(data2 var)，但它不是附加到线上，而是创建一条新线。

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

};

Answer 1

您没有关注 enter , 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);    
}

示例 here .