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，这是

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

这里有一些documentation。另外，为了实现binder监听器，我已经强调了Mike的zooming with circles示例。这是显示它的fiddle。

希望有所帮助！

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);

添加点击处理程序只是一个附加声明：

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

完整演示here。

如何将click事件分配给d3js中的每个svg元素

3 个答案: