斷開d3折線圖？

Question

我有這樣的D3線圖：

http://jovansfreelance.com/bikestats/d3/tipsy.php

你可以看到JS源那裏，它位於http://jovansfreelance.com/bikestats/d3/js/d3LineChart.js。

我向頁面添加了一個警報，以便在頁面加載時提醒數據對象。如你所見，我每年都有多個值。這很好，圖表看起來應該是這樣的，除了2012年的值不應該連接回2006年的值。

基本上，我的問題是，如何在某些地方斷開圖形？每當x軸值爲2012時，我需要斷開圖表（不顯示從2012年到2006年的線路）。

Answer 1

您需要更改數據的結構。正如現在所寫的，generateData()函數將取20個值並將它們推送到相同的數組中。這導致數據變量爲具有以下結構對象的數組：

data = [ 
    { value: "253.65", date: "2006"}, 
    { value: "269.67", date: 2007 }, 
... 
]; 

此數據結構造成D3到一個單一的，連接線繪製2006年至2012年，然後回到2006再次兩次。

爲了得到三條不同的線，您需要分解數據，以便d3將每個序列識別爲不同的對象。考慮將您的數據轉化爲像這樣的結構：

data = [ 
{ 
    name: "series01", 
    points: [ 
     { value: "253.65", date: "2006"}, 
     { value: "269.67", date: 2007 }, 
     ... 
    ] 
}, 
{ 
    name: "series02", 
    points: [ 
     { value: "253.65", date: "2006"}, 
     { value: "269.67", date: 2007 }, 
     ... 
    ] 
}, 
{ 
    name: "series01", 
    points: [ 
     { value: "253.65", date: "2006"}, 
     { value: "269.67", date: 2007 }, 
     ... 
    ] 
} 

];

當然，如果你這樣做，你將需要重寫其他d3組件處理的事實，即圓的x和y值嵌套在每個系列對象的points屬性中。有關繪製多條線的更多信息，請參閱multiple lines d3。

添加在回覆註釋：

大小循環，它在一個時間分配RAWDATA元素數據的一個是問題所在。它違背了d3處理數據的方式。在第一個循環中，d3爲數據數組中的7個元素輸入7個路徑和圓圈。

.enter()僅基於數據數組中的更改添加新的svg元素。如果沒有使用密鑰，則更改由數組長度驅動。由於數據數組的長度在循環的第二次和第三次不會改變，因此不會添加新路徑。

要獲取所有三行，請刪除循環，使用.data(rawdata)作爲數據並將行'd'屬性更改爲.attr('d', line(d.points))。

不幸的是，這會弄亂圈子。對於在同一數據上繪製圓圈和線條的幫助，請查看Mike Bostocks svg：在此谷歌小組討論中的g元素建議https://groups.google.com/forum/?fromgroups=#!topic/d3-js/8XLzUYLoFnY