Question

D3仅在.enter（）上附加元素，而从不在.exit（）上删除它们

我有一个对象数组，如：

arr = [{name:"a"},{name:"b"},{name:"c"},{name:"d"}]

然后在我的选择中使用它初始

.selectAll("rect").data(arr)

然后单击一下，我再次将部分拼接的数组用作数据。

但是D3始终只将给定的数据创建为Elements，而从不将其删除到exit（）上。也永远不会更新。只是重新创建

const g = d3.select(this.svgElement.nativeElement).append("g");

const rects = g
    .selectAll("rect")
    .data(meta, function(d) {
      console.log('data', d);
      return d.name;
    });


rects
    .exit()
    // .transition(t500)
    .each(function (d, i) { console.log('x rect exit', i, d); })
    .style("fill", "blue")
    .remove()
;

rects
    .each(function (d, i) { console.log('x rect update', i, d); })
    .attr("fill", "green")
;

rects
    .enter()
    .append("rect")
    .each(function (d, i) { console.log('x rect enter', i, d); })
    .attr("x", function(d, i) {
      return i * (rw + gap);
    })
    // .transition(t500)
    .attr("width", rw)
    .attr("height", rh)
    .style("fill", "white")
;

我想将现有元素与新数据一起重用，并去除剩余物。在所有示例中似乎都很简单。但是我没有看到我的错误。

希望您比我看到的更多。预先感谢您的帮助。

问候格里高

D3 data（）调用不会触发元素上的exit（），但enter（）可以工作

0 个答案: