在 D3.js 中使用数据连接处理元素的删除答案

【问题标题】：Handling Removal of Elements with Data Join in D3.js在 D3.js 中使用数据连接处理元素的删除
【发布时间】：2012-10-16 04:39:49
【问题描述】：

我在图表上有一组圆圈，其中包含以下数据并使用日期作为每个圆圈的键：

data = [
 {date: '2012-01-01', amount: 100 },
 {date: '2012-01-02', amount: 200 },
 {date: '2012-01-03', amount: 300 },
 {date: '2012-01-04', amount: 400 },
 {date: '2012-01-05', amount: 500 }
]

var circles = container.selectAll("g.circles")
    .data(data, function(d){ return d.date; });

// ENTER
circles.enter().append("circle")
  .attr("class","live")
  .attr("cy", function(d){return yScale(y(d,i)); })
  .attr("cx", function(d){return xScale(x(d,i)); })
.transition(500)
  .delay(function(d,i){return i*50;})
  .style("display",function(d){ return y(d,i) === null ? 'none' : 'inline'; })
  .attr("r", radius - 3 )
  .attr("fill", "#f7f7f7")
  .attr('clip-path','url(#rpm-clip2)')
  .each("end", events);

// TRANSITION
d3.transition(circles)
  .attr("cy", function(d){return yScale(y(d,i)); })
  .attr("cx", function(d){return xScale(x(d,i)); });

然后我使用以下数据集重新加载数据：

data = [
 {date: '2012-01-01', amount: 200 },
 {date: '2012-01-02', amount: 300 },
 {date: '2012-01-03', amount: 400 },
]

您会注意到，这个数据集更短。我希望删除缺少的日期，但在更新中不会触及它们。有什么想法吗？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

您必须明确删除它们。 .exit() 集合包含所有没有数据的节点：

circles.exit().remove();

https://github.com/mbostock/d3/wiki/Selections#wiki-exit

【讨论】：