用d3js抓取元素

Question

我在學習d3js庫。面對點擊捕獲表的TD元素的問題。我通常用這種方式

window.addEventListener("load", function(){ 
    document.getElementById("table_id").addEventListener("click",function(e){ 
      var elem = e.target || e.srcElement; 

      if(elem.nodeName != "TD") return; 

... 
    } 
... 

所以我需要在d3js做類似的事情。但我不知道如何替換.target和.srcElement方法。 我做什麼都

d3.select(#table_id).on('click',function(){ 
    var elem = ??? 

在this我有我的表。在d3.event這樣的信息click clientX=327, clientY=129。 d是不明確的

請幫助我抓住變種的TD元素。

Answer 1

D3js非常靈活，你不需要每次都使用d3.event.target。

當你問一些細節錯過了你的代碼：

選擇

有在d3兩個選擇功能：

d3.select()它得到或找到特定tag或element或class或tag id，例如：

d3.select('div')返回第一個div或d3.select('.active')查找標籤有名爲active的類。在你的情況下，你應該使用d3.select('#table_id')你在選擇功能中錯過了單引號。

下D3選擇功能d3.selectAll()行爲像d3.select()但不同的是此功能選擇所有的參數，例如：

d3.selectAll('p')回報所有p標籤或全部Id或類得到的參數。

2.這與d之間不同

this是用它來選擇特定的標籤，你儘量選擇或做一些關於它的東西，更可用在selectAll功能，因爲你不爭論不知道選擇了哪個標籤。

d是包含所有屬性和事件的對象或DOM。

所以我改變了你的代碼，希望它能幫助你更好地學習d3。

d3.select("#table_id").on("click",function(){ 

      var elem=d3.select(this); 
      if(elem.attr("name")!=="TD") 
        return; 

}); 

更多信息here。