斷開d3折線圖？

Question

我有這個d3折線圖：

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

您可以在http://jovansfreelance.com/bikestats/d3/js/d3LineChart.js上找到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屬性內的事實。 有關繪制多條線的更多信息，請參見多條線d3 。

在回復評論時添加：

問題是，一次將原始數據元素分配給數據的大小循環。 它與d3處理數據的方式相反。 在第一個循環中，d3為數據數組中的7個元素輸入7條路徑和圓。

.enter()僅基於數據數組中的更改添加新的svg元素。 如果不使用任何鍵，則更改由陣列長度決定。 由於數據數組的長度在循環中第二次和第三次不變，因此不會添加任何新路徑。

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

不幸的是，這會搞亂圈子。 如需在同一數據上繪制圓和線的幫助，請參閱此Google組討論中的Mike Bostocks svg：g元素建議https://groups.google.com/forum/?fromgroups=#!topic/d3-js/ 8XLzUYLoFnY