d3 enter（）。append（）不附加數組中的所有元素

Question

在完成教程之後，我正在研究我的第一個中等規模d3項目。我瞭解比例尺，輸入，更新和退出，所以我很困惑我遇到的問題。

我有一個JSON對象數組，兩個字段，year和number。我創建一個條形圖與該陣列用下面的代碼：

var bar = chart.selectAll('g') 
    .data(yearData) 
    .enter().append('g') 
    .attr('transform', function(d, i) { 
     console.log(i); 
     return 'translate(' + i * barWidth + ',0)'; }); 

我的困惑來源於這樣的事實，所述console.log聲明在此代碼塊輸出27作爲它的第一個值。換句話說，d3跳過我陣列的元素0 - 26。爲什麼會這樣？

感謝您的幫助。

Answer 1

這很可能是因爲您的頁面上已經有g元素（例如，添加了軸）。這些選擇與數據匹配，所以輸入選擇不包含您所期望的所有內容。

一種解決方案是一類分配給這些元件，並相應地進行選擇：在this tutorial下半年

var bar = chart.selectAll('g.bar') 
.data(yearData) 
.enter().append('g') 
.attr("class", "bar") 
// ... 

在此更詳細地。