Question

我正在尝试制作一个非常简单的分数可视化器，基本上用户可以输入分子和分母，d3 将显示框，分子为蓝色，其余为白色（空/空白），单击时一个按钮。
我正在使用的功能如下：

const redraw = function() {
  d3.select("frac")
    .selectAll("div")
    .data(window.dataset)
    .exit()
    .remove()
  d3.select("frac")
    .append("div")
    .selectAll("div").data(window.dataset)
    .enter()
    .append("div")
    .attr("class", "bar")
    /* .text((d)=>d) */
    .style("width", width / window.dataset.length + "vw")
    .style("background-color", (d) => {
      if (d == 0) {
        return "white"
      } else if (d == 1) {
        return "blue"
      } else if (d == 2) {
        return "red"
      } else if (d == 3) {
        return "yellow"
      }
    })
}

在此处查看完整代码：https://jsfiddle.net/sbrevolution5/gpueyrtf/53/

出于某种原因，当我更新一个数字并重新绘制 d3 元素时，它会保留 2 个蓝色框，但随后会在下面创建新元素。

Answer 1

您需要交换行 .remove() 和 .exit()。所以来自：

    .exit()
    .remove()

改为

    .remove()
    .exit()

当我想要删除所有元素时，为什么 d3 会保留我的一些元素？

1 个答案: