0

在下面的代码中，触发了 onclick 事件，但没有附加圆圈。我不知道为什么。

也许是因为以下可变的？

代码片段：

.on("click", function (event, d) {
      let center = pathMap.centroid(d.geometry);
      console.log(center);
      
      mouse
        .append("circle")
        .attr("cx", center[0])
        .attr("cy", center[1])
        .attr("r", 20)
        .attr("fill", "red");

      
      mutable selected = d.properties;

来源：https ://observablehq.com/@statistikzh/leerwohnungszahlung

4

1 回答 1

1

在您的笔记本中，每次单击地图中的某个区域时，都会重新评估地图单元格并重新绘制整个地图。正在添加圆圈，但随后地图会立即从头开始重新绘制。

如果您注释掉这些行

console.log(colorScaleOrd(d.properties.GDE_ID));
d3.select(this).style("stroke", colorScaleOrd(d.properties.GDE_ID));

然后你会看到圈子被添加了。

单击处理程序更改gem_sel。colorScaleOrd取决于gem_sel和地图取决于colorScaleOrd。点击处理程序更新gem_sel，这会导致colorScaleOrd重新评估单元格，这会导致重新评估绘制地图的单元格。有一种循环依赖。

要参考可变状态简介笔记本，您应该尽量避免在 Observable 上使用可变状态来防止此类问题。

注意：该mutable关键字很容易被滥用，从而使成功编写 Observable 笔记本变得更加困难！对于那些需要绕过 Observable 的反应式数据流模型的罕见情况，可以将其视为一个逃生舱。

编辑：我已经为你的 notebook 创建了一个分支，以演示一种无需使用mutable.

于 2021-07-27T15:17:33.947 回答