exit().remove() 不会删除以前的内容 js d3

Question

      var datapoints = svg.selectAll('indPoints').data(filtered_up);

      datapoints
        .enter()
        .append('circle')
        .merge(datapoints)
        .attr('cx', function (d) {
          return x(d.callType) - jitterWidth / 2 + Math.random() * jitterWidth;
        })
        .attr('cy', function (d) {
          return y(d.time);
        })
        .attr('r', 1.5)
        .style('fill', function (d) {
          return myColor(+d.time);
        });

      datapoints
        .transition() // and apply changes to all of them
        .duration(1000);

      datapoints.exit().remove();

在我更改数据（filtered_up）内容后，上面的代码不会删除以前的数据点。

编辑：

      var boxes = svg.selectAll('boxes').data(sumstat);
      boxes
        .enter()
        .append('rect')
        .transition()
        .duration(2000)
        .attr('x', function (d) {
          return x(d.key) - boxWidth / 2;
        })
        .attr('y', function (d) {
          return y(d.value.q3);
        })
        .attr('height', function (d) {
          return y(d.value.q1) - y(d.value.q3);
        })
        .attr('width', boxWidth)
        .attr('stroke', 'black')
        .style('fill', 'blue');
      boxes.exit().remove();

上面的代码也是如此。与附加选择的 indPoints/boxes 有关吗？

Answer 1

尝试使用：

.html("");

例子

d3.select('#graph').html("");