Question

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

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

根据我对d3.js的基本了解，现有数据和新数据之间的大小差异应导致在enter块中选择非空的“ 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-向2D数组添加新元素不会产生新的dom（svg）元素

0 个答案: