d3.js 解決——元素覆蓋

元素覆蓋最常見的應該是在氣泡圖中
然而數據的不可控+手勢交互難免會碰到A元素被B元素覆蓋使其無法觸發交互事件；
如下svg中各《circle》都被添加了事件，但因爲最大的circle在最後才生成，從而使其其他元素的交互事件被遮擋

最初遇到這樣的問題時再加上聽說svg不支持浮動之類的說法。就暫時把問題存起來了。

情況一：具有共同parent元素時

更改dom結構
array.sort()相信大家都用過。然而這個就是解決的關鍵；
1.選擇所有circle
var circle = d3.selectAll("circle")

2.circle選擇集就是個數組啦。v4版本好像是對象——circle.updata纔是數組。。記不清了。錯了請忽略
circle.sort(function(a,b){
...
})
這裏擺兩個例子針對不同數據結構的處理demo自行查看源碼

情況二：具有不同parent元素時

一般都是根據數組生成一組元素，如上例子。
然而有時候會使用相同元素表示不同數據的某一屬性；
以一個簡單的例子來說明,這裏有兩類數據。而兩類中分別又各有兩個數值，使用氣泡的形式展示會如何呢；

var data = [{
name:"A",
sizes:[8,13]
},
{
name:"B",
sizes:[24,26]
}];

生成後

而dom結構如下

按第一種方法直接排序會如何呢？

貌似完美啊。。。貌似結構也變了

那對g元素也排序好不？

真的完美。。。

真的完美了嗎？
未知的數據纔是萬惡之源。。比如其實也沒變多少。。。

var data = [{
name:"A",
sizes:[13,24]
},
{
name:"B",
sizes:[8,26]
}];
結果就坑了

坑。。。辦法也是有的。
待續