Onclick 事件触发，但不执行附加代码

Question

在下面的代码中， 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

Answer 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 notebook 变得更加困难！ 将其视为需要绕过 Observable 的反应式数据流模型的极少数情况的逃生舱口。

编辑：我创建了一个你的 notebook的分支来演示一种在不使用mutable情况下构建这个可视化的方法。