Question

当我在D3中创建圆圈时，我可以分配它们，例如onclick事件

svg.selectAll("circle").data(dataArray).enter().append("circle").on("click"),function(d){// do stuff});

当我想创建新的圈子并因此更新我的圈子的数据集时，我这样做：

svg.selectAll("circle").data(newDataSet,function(d){return d;}).enter().append("circle")

（我故意遗弃了这些属性）

有没有办法以某种方式继承旧圈子中的on（）事件，还是我必须再次定义这些事件？

根据我的理解，它不应该是可能的，因为d3不是面向对象的。

Answer 1

首先，下面并不完全正确。输入将只为您提供没有现有DOM元素的节点。您将使用merge（在第4版中）更新现有节点。

当我想创建新的圈子并因此更新数据集时我的圈子我这样做：
svg.selectAll("circle").data(newDataSet,function(d){return d;}).enter().append("circle")

根据您的实际问题，下面将为每个圆圈节点分配点击监听器。

svg.selectAll("circle").data(dataArray).enter().append("circle").on("click"),function(d){// do stuff});

因此，添加的新节点必须分配新的事件侦听器。

我认为您可能缺少对数据连接的理解，this是一个很好的阅读。使用数据连接看起来像这样：

function makeCircles(data) {
        var circles = d3.select('svg')
                .selectAll('circle')
                .data(data, function(d) {
                    return d;
                });

        circles.exit().remove();

        circles.enter()
                .append('circle')
                .merge(circles)
                .attr('r', function(d) {
                    return d + 5;
                })
                .attr('cx', function(d, i) {
                    return 50 + 50 * i;
                })
                .attr('cy', function(d, i) {
                    return 30;
                })
                .on('click', function() {
                    //
                })
    }

    var data = [1, 2, 3];
    makeCircles(data);
    data = [10, 15, 16];
    makeCircles(data);

如果您关心的是分配多个事件监听器，为什么不将事件监听器分配给圈子的父元素并让事件冒泡？

新的/更新的元素继承旧的事件处理程序D3

1 个答案: