d3.js - D3.js - 向二维数组添加新元素不会产生新的 dom (svg) 元素

Question

我只是在学习 d3.js，并希望在彩色矩形的二维网格中可视化我的数据。每当我的数据更改时，都会调用下面的 d3 代码。它正确构建初始网格，正确更新现有单元格，并按预期对现有项目的删除做出反应（单元格被删除+其他更新）。

但是，当我添加（新）数据项时，网格数据会正确更新，但不会添加新单元格 - 这意味着不会显示网格中的最后一个元素。

根据我对 d3.js 的非常基本的理解，现有数据和新数据之间的大小差异应导致输入块中的非空“ squares.enter() ”选择，以便将新的rect元素添加到最后一行。

谁能告诉我我的假设是怎么错的？或者给我一个提示我必须改变什么来添加新数据？

//format 1d to 2d array
let d = this.gridData(this.props.data);

//Enter rows
let rows = d3
  .select(this.svgRef.current)
  .selectAll(".row")
  .data(d)
  .enter()
  .append("g")
  .attr("class", "row");

//Enter cells for each row
let squares = rows.selectAll(".square").data(d => d);
squares.enter().append("rect")
  .attr("class", "square")
  .attr("x", d => d.x)
  .attr("y", d => d.y)
  .attr("width", d => d.width)
  .attr("height", d => d.height)
  .style("fill", d => d.c)
  .style("stroke", d => {
    if (d.id == this.props.focus) {
      return "#FF0000";
    } else {
      return "#FFFFFF";
    }
  });

//Update cells
squares = d3.select(this.svgRef.current).selectAll(".row")

squares.selectAll(".square")
  .attr("x", d => d.x)
  .attr("y", d => d.y)
  .attr("width", d => d.width)
  .attr("height", d => d.height)
  .style("fill", d => d.c)
  .style("stroke", d => {
    if (d.id == this.props.focus) {
      return "#FF0000";
    } else {
      return "#FFFFFF";
    }
  });

//exit => remove rows/cells
squares.exit().remove();
squares.selectAll(".square").data(d => d).exit().remove();

标签： d3.js