如何解决无法在Angular的d3.js饼图上放置工具提示
我正在尝试在Angular项目中集成有效的d3代码。
除工具提示位置外的所有权利。 它通常应显示在饼图的重点部分上方,但:
-
当工具提示是主体中的div时,它总是显示在图形的底部
-
将工具提示添加到svg元素时从未显示
我尝试过
.style('z-index','9999')
.style("position","absolute")
和其他很多东西,但是不起作用。
当我调试以查看我的元素在svg中的位置时(将其添加到svg中时),tooltip元素存在于正确的位置,但其尺寸为0x0。
我通过.attr('height','100px').attr('width','100px')
添加高度和宽度时也是如此。
当我直接在浏览器中修改html时,它什么也没有改变...
您可以在stackblitz上查看完整的代码。
我不再有解决这个问题的想法。有什么主意吗?
预先感谢:-)
解决方法
在D3 v6中,添加工具提示的API已更改,因此you can change your function accordingly:
RDS
对于工具提示,您需要一个容器div,其中同时包含SVG和工具提示:
onst arcs = this.arcs
const onMouseover = (event,d) => {
const e = arcs.nodes();
const i = e.indexOf(this);
const pointerEvent = d3.pointer(event)
//...
}
this.arcs
.on("mouseover",onMouseover)
将容器设置为<div class="container">
<svg></svg>
<div class="tooltip"></div>
</div>
,并将工具提示设置为position: relative
,以便其位置取决于父容器,因此取决于SVG本身。然后,您可以使用position: absolute
定位它:
style()
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。