如何解决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
的情况下构建此可视化的方法。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。