將新的數據點條目添加到折線圖

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模式。基本上，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);  
} 

例here。