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未定义

请帮助我抓住var。

中的TD元素

Answer 1

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

正如您所问，您的代码中遗漏了一些细节：

1。选择

d3中有两个选择功能：

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

d3.select('div')返回第一个div或d3.select('.active')查找标记的类名为active。在您的情况下，您应该在select函数中使用d3.select('#table_id')错过单引号。

下一个d3选择函数是d3.selectAll()，其作用类似于d3.select()，但区别在于此函数选择所有参数，例如：

d3.selectAll('p')返回所有p标记或所有ID或类获取作为参数。

2。 与此之间存在差异

this是一个参数，用于选择您尝试选择的特定标记或在其上执行某些操作，并且在selectAll函数中更有用，因为您不知道选择了哪个标记。

d是一个包含所有属性和事件的对象或DOM。

所以我更改了您的代码，并希望它能帮助您更好地学习d3。

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

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

});

更多信息here。

用d3js抓住元素

1 个答案: