如何將click事件分配給d3js中的每個svg元素

Question

我在svg元素中添加了九個矩形。 如何為每個人添加點擊事件？

var nodeValues = [0, 1, 2, 3, 4, 5, 6, 7, 8];

var colors = ["aqua", "darkblue", "black", "red", "green", "gray", "navy", "orange", "teal"];

var main = d3.select("#main");

var svg = main.append("svg")
    .data(nodeValues)
    .attr("width", 300)
    .attr("height", 300);

var elementAttr = function (index) {
    return {
        x: (index % 3) * 100,
        y: Math.floor((index / 3)) * 100,
        width: 95,
        height: 95
    }
}

for (var index in nodeValues) {
    var rect = svg.append("rect")
        .attr(elementAttr(index))
        .style("fill", "red" );
}

這是Jsfiddle 。

更新 ：我希望在點擊事件上更改矩形寬度等屬性。

Answer 1

for (var index in nodeValues) {
    var rect = svg.append("rect")
        .attr(elementAttr(index))
        .style("fill", "red" )
        .on('click', function(d,i) {
            // handle events here
            // d - datum
            // i - identifier or index
            // this - the `<rect>` that was clicked
        });
}

Answer 2

我對斯蒂芬的回答進行了投票，但它實際上只是錯過了一部分 - 而不是.click，而不是.click

.on("click", function(d){...

這是一些文檔 。 另外，為了實現綁定器監聽器，我已經使用了圓圈來縮放邁克的縮放示例。 這是一個表明它的小提琴 。

希望有所幫助！

Answer 3

我重構了你的代碼，使其更像D3 - 特別是，如果你使用D3的選擇和數據匹配，你不需要循環。 然后代碼如下所示：

svg.selectAll("rect")
    .data(nodeValues).enter().append("rect")
    .each(function(d) {
        var attrs = elementAttr(d);
        d3.select(this).attr(attrs);
    })
    .style("fill", rectColor);

添加click處理程序只是在此結尾處的另一個語句：

    .on("click", function() {
        d3.select(this).attr("width", 120);
    });

在這里完成演示。