Question

我试图找出在d3中创建点击事件的元素。以下是我用来测试事件处理的一些示例代码：

g.selectAll("text")
    .data(allPoints).enter()
    .append("text")
    .attr("text-anchor", "end")
    .attr("class", "point-label")
    .attr("font-size", fontSize)
    .attr("cursor","pointer")
    .attr("id", function(d,i){
        return allPointData[allPoints.indexOf(d)][1] + "_name";
     })
    .text( function(d) { return allPointData[allPoints.indexOf(d)][1]; })
    .on("click", function(d) {
         // figure out what DOM element raised me
    });

到目前为止，我试图这样做：

.on("click", function(d) {
         alert("########### text with " + JSON.stringify(d3.event.target));
});

但是，我从实际的dom对象获得了一些奇怪的值，而不是整个对象本身。

########### text with {"__data__":[-122.2405556,37.7652778]}

更新：当我尝试：JSON.stringify（this）时，我也得到了相同的对象

实际上，我所要做的就是找出所谓的元素，并希望抓住它的ID。有了这个，我想在firefox中的Scartchpad中运行一些js代码，尝试用实际代码手动调用click函数，如：

document.getElementById("#element").click()

Answer 1

您可以使用this找出调用DOM对象：

.on("click", function(d) {
     console.log("my name is " + d3.select(this).text() + 
     " and my ID is " + d3.select(this).attr("id"));
});

这是一个小提琴：https://jsfiddle.net/ap1m1L0q/1/

弄清楚D3中的调用DOM对象

1 个答案: