如何在D3中更新我的多個折線圖數據？

我已經挑選了幾個不同的示例以獲得儘可能遠的效果。我有一個簡單的雙線折線圖由一個對象提供。爲了測試，我創建了一個函數，通過在最後添加一個新的數據點來增加數據。我希望我的圖表反映這些增加。如何在D3中更新我的多個折線圖數據？

什麼工作：

的數據被添加到該對象。
當按鈕點擊後，YScale調整

什麼不起作用：

的XScale不調整新數據。
團隊1線適應Team2線的數據，然後相應地沿着Y進行縮放。

這是一團糟。就在我認爲我理解D3的時候，數據併入使我感到羞恥！

這是一些代碼和a mostly-working fiddle。

已更新：這是an updated fiddle，它按預期工作。我知道D3讓這些東西變得更容易，所以，當它工作時，我正在尋找更優雅的方式來獲得相同的結果。

我的數據格式...

//SET SAMPLE DATA 
var data = [{ 
    "team": "Team 1", 
    "score": 0, 
    "elapsedTime": 0 
}, { 
    "team": "Team 1", 
    "score": 2, 
    "elapsedTime": 3 
}, 
    ... 
{ 
    "team": "Team 2", 
    "score": 18, 
    "elapsedTime": 60 
}];

我的更新功能...

function updateChart(){ 
    //SPLIT UPDATED DATA OBJECT INTO TWO TEAMS 
    dataGroup = d3.nest() 
    .key(function(d) { 
     return d.team; 
    }) 
    .entries(data); 

    //DRAW LINES 
    dataGroup.forEach(function(d, i) { 

    // Select the section we want to apply our changes to 
    var vis = d3.select("#visualisation").transition(); 

    xScale.domain([0, d3.max(data, function(d) { 
     return d.elapsedTime; 
    })]); 
    yScale.domain([0, d3.max(data, function(d) { 
    return d.score; 
    })]); 

    //PROBLEM: Team 1 line changes to Team 2's data 
    vis.select("#line_team1") 
     .duration(750) 
     .attr("d", lineGen(d.values)); 
    }); 

    vis.select("#line_team2") 
     .duration(750) 
     .attr("d", lineGen(data)); 

    // X-SCALE NEVER ADJUSTS 
    vis.select(".x.axis") // change the x axis 
     .duration(750) 
     .call(xAxis); 

    // Y-AXIS SEEMS TO SCALE AS EXPECTED 
    vis.select(".y.axis") // change the x axis 
     .duration(750) 
     .call(yAxis); 
};

任何有識之士將不勝感激！

來源

2016-04-27 Layne

親愛的萊恩，我的解決方案對你有幫助嗎？ – iulian

進一步簡化代碼的一種方法是將其更改爲基於數據本身更新。

我經常使用的方法是獲取用於從數據本身更新數據的選擇器。你的情況，你可以用你的dataGroup對象的key屬性：

dataGroup.forEach(function(d, i) { 
    vis.select("#line_"+d.key.toLowerCase().split(' ').join('')) 
    .duration(750) 
    .attr("d", lineGen(d.values)); 

    var maxi = d3.max(data, function(d) { 
    return d.elapsedTime; 
    }); 
    ... 
});

或者你可以做預處理在d3.nest()調用，以獲得在team1形式的密鑰，並用它作爲一個選擇。

下面是您的fiddle的一個分支和工作示例。

來源

2016-04-27 19:59:25 iulian

如何在D3中更新我的多個折線圖數據？

回答

相關問題