初识 D3.js之动态图表了解 update、enter、exit

前端

2023-10-26 18:26:16

在使用D3.js构建交互式可视化图表时，经常会遇到数据与图形元素数量不匹配的情况。为了处理这种不确定性，D3.js提供了三个重要的概念：Update、Enter和Exit。

什么是Update、Enter、Exit？

Update:当选择集中的元素数量与数据数量相等时，执行此方法，更新这些图形元素。
Enter: 当选择集中的元素数量小于数据数量时，执行此方法，添加足够的元素。
Exit:当选择集中的元素数量大于数据数量时，执行此方法，删除多余的元素。

理解了这些概念后，我们就可以构建交互式可视化图表了。

构建交互式动态图表

假设我们有一个包含人口数据的数组，现在我们需要使用D3.js创建一个交互式图表，可以显示不同年份的人口变化情况。

首先，我们需要将数据加载到D3.js中。

var data = [
  { year: 2010, population: 100 },
  { year: 2011, population: 120 },
  { year: 2012, population: 140 },
  { year: 2013, population: 160 },
  { year: 2014, population: 180 },
];

然后，我们需要创建一个SVG元素作为图表容器。

var svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 500);

接下来，我们需要创建一个比例尺，将人口数量映射到图表中的位置。

var xScale = d3.scaleLinear()
  .domain([2010, 2014])
  .range([0, 500]);

var yScale = d3.scaleLinear()
  .domain([0, 180])
  .range([500, 0]);

现在，我们需要将数据绑定到SVG元素中。

var bars = svg.selectAll("rect")
  .data(data);

最后，我们需要使用Enter和Update方法来构建图表。

bars.enter()
  .append("rect")
  .attr("x", function(d) { return xScale(d.year); })
  .attr("y", function(d) { return yScale(d.population); })
  .attr("width", 20)
  .attr("height", function(d) { return 500 - yScale(d.population); });

bars.update()
  .attr("x", function(d) { return xScale(d.year); })
  .attr("y", function(d) { return yScale(d.population); })
  .attr("width", 20)
  .attr("height", function(d) { return 500 - yScale(d.population); });