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

问题描述

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

解决方法

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

如果你注释掉这些行

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 的单元格，从而导致重新评估绘制地图的单元格。有一种循环依赖。

要引用 Introduction to Mutable State 笔记本，您应该尽量避免在 Observable 上使用可变状态以防止此类问题。

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

编辑：我创建了一个 fork of your notebook 来演示一种在不使用 mutable 的情况下构建此可视化的方法。