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

wf82jlnq  于 2023-10-19  发布在  其他
关注(0)|答案(1)|浏览(110)

当我在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不是面向对象的。

3pvhb19x

3pvhb19x1#

首先,下面的说法并不完全正确。enter只会给予不存在DOM元素的节点。您可以使用merge(在v4中)来更新已经存在的节点。
当我想创建新的圆并因此更新我的圆的数据集时,我这样做:

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

来到你的实际问题,下面将分配点击监听器为每个圆DOM节点。

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() {
                    // do stuff
                })
    }

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

如果你关心的是分配多个事件监听器,为什么不把事件监听器分配给圆的父元素,让事件冒泡呢?

相关问题