D3 selection.join()实用示例

// 假设有一个包含数据的数组
const data = [10, 20, 30, 40, 50];

// 选择SVG容器
const svg = d3.select("svg");

// 创建初始的柱状图
const bars = svg.selectAll("rect")
  .data(data)
  .join("rect")
  .attr("x", (d, i) => i * 40)
  .attr("y", d => svg.attr("height") - d)
  .attr("width", 30)
  .attr("height", d => d)
  .attr("fill", "steelblue");

// 更新柱状图
data[2] = 35; // 修改数据
bars.data(data)
  .join("rect")
  .attr("x", (d, i) => i * 40)
  .attr("y", d => svg.attr("height") - d)
  .attr("width", 30)
  .attr("height", d => d)
  .attr("fill", "steelblue");

// 删除柱状图
data.pop(); // 移除最后一个数据
bars.data(data)
  .join("rect")
  .attr("x", (d, i) => i * 40)
  .attr("y", d => svg.attr("height") - d)
  .attr("width", 30)
  .attr("height", d => d)
  .attr("fill", "steelblue");