d3.js 解决——元素覆盖

最新推荐文章于 2021-07-14 11:11:00 发布

lh_qppr

最新推荐文章于 2021-07-14 11:11:00 发布

阅读量5.1k

点赞数

分类专栏： D3 文章标签： d3

本文链接：https://blog.csdn.net/lh_qppr/article/details/71105323

版权

本文探讨了d3.js中元素覆盖导致的交互事件问题，特别是在气泡图场景下。针对具有共同parent元素和不同parent元素的情况，提出了通过排序DOM结构来解决覆盖问题的方法，并给出了相关示例和注意事项。

摘要由CSDN通过智能技术生成

元素覆盖最常见的应该是在气泡图中
然而数据的不可控+手势交互难免会碰到A元素被B元素覆盖使其无法触发交互事件；
如下svg中各《circle》都被添加了事件，但因为最大的circle在最后才生成，从而使其其他元素的交互事件被遮挡

height="350" width="350" src="https://lhstock.github.io/home/contents/D3/v3/float_1.html" allowfullscreen="">

最初遇到这样的问题时再加上听说svg不支持浮动之类的说法。就暂时把问题存起来了。

情况一：具有共同parent元素时

更改dom结构
array.sort()相信大家都用过。然而这个就是解决的关键；
1.选择所有circle
var circle = d3.selectAll("circle")
2.circle选择集就是个数组啦。v4版本好像是对象——circle.updata才是数组。。记不清了。错了请忽略
circle.sort(function(a,b){ ... })
这里摆两个例子针对不同数据结构的处理demo自行查看源码
height="350" width="350" src="https://lhstock.github.io/home/contents/D3/v3/float_2.html" allowfullscreen="