添加SVG：圓元件以一個d3.js線

Question

我渲染經由D3線圖，其被結合到下面的格式的對象的數組：

{ name: "somename", 
    pointStart: 90210, 
    pointInterval: 187, 
    data: [1,2,3,4,5] 
} 

的Y值的值在data和X值是日期值，加入pointStart到pointInterval的產品和data

除了繪製行路指數計算的順序，我試圖覆蓋「圈」在每個x，y座標。該線條正確呈現，並且除第一個圓圈之外的所有圖像都顯示出來。

檢查此plunkr爲實例。

由於線路徑已經有x，y座標，我希望能夠使用它，並在每一對上繪製圓，但是找不到第一個圓座標，我不知道爲什麼。

這是選擇線陣列，獲取x，y對然後繪製圓的代碼。 數據綁定到9元素的數組，但只有8圈被添加到DOM ...

lines.selectAll('path') 
.data(function(d) { console.log(getDataArray(d)); return getDataArray(d); }) 
.enter() 
.append('circle') 
.attr({ 
    class:'dot', 
    cx:line.x(), 
    cy:line.y(), 
    r:circleR, 
    fill: function(d,i,e) { return colors(data[e].name);} 
}) 

Answer 1

這是因爲你選擇的「路徑」，但加入「圈」。當你做lines.selectAll('path')它返回一個包含1個元素的選擇，因爲在行下已經有一個<path>元素。所以當你用9個元素進行數據綁定時，第一個元素綁定到現有路徑，剩下的8個元素用於輸入選擇。

如果改成這樣它應該工作：

lines.selectAll('circle') 
    .data(function(d) { console.log(getDataArray(d)); return getDataArray(d); }) 
    .enter() 
    .append('circle')