Question

我有一个d3.js图，它是由一组对象组成的，例如：

svg.selectAll(".circ").data(dataArr) // dataArr is my array of objects
    .enter().append("circle")
    .attr("cy", function (d) {
        return d.y
    })
    .attr("cx", function (d) {
        return d.x
    })
    .attr("r", elemSize / 2)
    .on("dblclick", function (d, i) {
        itemWasClicked(d,i); // function to handle double click
    }

在提到的itemWasClicked(d,i)例程中（其中d是点击元素的数据，i是数组dataArr中的索引）我需要找到实际的SVG元素单击并更改其颜色。

如何通过附加数据找到d3.js元素？除非必要，否则我不希望使用ID元素附加/搜索。如果速度更快或者没办法，我就会这样做。

Answer 1

事件处理程序this内部是对操作元素的直接引用。

请参阅selection.on documentation：

以与其他运算符相同的方式调用指定的侦听器函数，传递当前数据d和索引i，用 this上下文作为当前DOM元素。

所以你可以简单地说：

.on("dblclick", function (d, i) {
    changeColorOf(this);
}

如何通过连接数据查找d3.js绘图元素？

1 个答案: