Question

我将d3用作react项目的一部分。有时候，我会显示数据（javascript对象数组），如下所示。

当我更新2D数据数组时，我想更新已更新对象的位置+大小并有条件地绘制边框。

但是，我注意到d3不仅会更新与更新后的数据相关的svg对象，而且会始终更新我的数据数组的第一个元素，并对所有其他元素执行enter操作。即使对象没有改变。数组引用也应该相同。

那是为什么？

let bound = d3
  .select(this.svgRef.current)
  .selectAll(".square")
  .data(this.props.data, d => d);

//enter
bound
  .enter()
  .append("rect")
  .attr("class", "square")
  .attr("id", d => d.id)
  .attr("x", d => {console.log("enter", d); return d.x})
  .attr("y", d => d.y)
  .attr("width", d => d.width)
  .attr("height", d => d.height)
  .style("fill", d => {
    return d.c;
  })
  .style("stroke", d => {
    if (d.id == this.props.focus) {
      return "#FF0000";
    } else {
      return null;
    }
  });

//updates
bound
  .attr("x", d => { return d.x })
  .attr("y", d => d.y)
  .attr("width", d => d.width)
  .attr("height", d => d.height)
  .style("fill", d => {
    return d.c;
  })
  .style("stroke", d => {
    if (d.id == this.props.focus) {
      return "#FF0000";
    } else {
      return null;
    }
  });


bound.exit().remove();

数据具有以下格式：

[{
  "id":"1.png","c":"#FFFFFF",
  "d":["No Data"],
  "index":0,
  "x":0,
  "y":0,
  "width":115,
  "height":16
}, { 
  "id":"2.png",
  "c":"#FFFFFF",
  "d":["Example Data"],
  "index":1,
  "x":115,
  "y":0,
  "width":115,
  "height":16
}, ...]

Answer 1

我的问题的答案似乎是不正确的按键功能。身份功能似乎不适用于对象数组。

为什么数据更新后我的输入选择不为空？

1 个答案: