d3.js不同選擇之間的混合數據

Question

我編譯我的問題分解成最小的工作示例在此fiddle：

HTML：

<div id='test'></div> 

JS：

var data = d3.range(10); 
var svg = d3.select('#test').datum('hello').append('svg'); 
var path = svg.append('g') 
    .append('path') 
    .data([data]) 
    .attr('class','line'); 

alert(svg.select('.line').data()); 

此代碼警報hello，這是數據綁定到div選擇，不是的路徑選擇，這是什麼我會預料到的。

爲什麼我看到這種行爲？

Answer 1

您會看到這一現象，因爲.select()有在你原來的選擇結合數據到部分選定的副作用（即svg）你正在做（即.line） - 作爲documentation詳細說明。也就是說，通過運行此代碼，即使您對.data()的呼叫沒有參數，也要更改綁定到所選元素的數據。

將此與.selectAll()對比，不是有這種副作用，並且確實會選擇帶有之前綁定到它們的數據的元素。

Answer 2

您的警報更改爲：

alert(svg.selectAll('.line').data()); 

有select和selectAll，其中前者的母公司數據適用於select「ED孩子之間的微妙但重要的區別。事實上，這裏並不明顯，但通過在該警報語句中使用select，您最終將清除之前在其上設置的範圍數據。請參閱此jsFiddle中的評論以瞭解問題：http://jsfiddle.net/5wZnL/7/。