无法在 Angular 中的 d3.js 饼图上定位工具提示

Question

我正在尝试将有效的 d3 代码集成到 Angular 项目中。

除了工具提示位置，一切都正确。它通常应该出现在饼图的重点部分上方，但是 :

当工具提示是正文中的div时，它总是出现在图表的底部
当我将工具提示添加到 svg 元素时，它从未显示

我试过了

.style('z-index', '9999')
.style("position", "absolute")

还有许多其他的东西，但它不起作用。

当我调试以查看我的元素在 svg 中的位置时（将其添加到 svg 时），工具提示元素存在于正确的位置，但其尺寸为 0x0。

当我通过 .attr('height', '100px').attr('width', '100px') 添加高度和宽度时也是如此。

当我在浏览器中直接修改 html 时它并没有改变任何东西...

你可以在stackblitz上看到完整的代码。

我不知道如何解决这个问题。有什么想法吗？

提前致谢:-)

Answer 1

在 D3 v6 中，添加工具提示的 API 已更改，因此 you can change your function accordingly:

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)

对于您的工具提示，您需要一个包含 SVG 和工具提示的容器 div：

<div class="container">
  <svg></svg>
  <div class="tooltip"></div>
</div>

将容器设置为 position: relative，将工具提示设置为 position: absolute，这样它的位置取决于父级，因此 取决于 SVG 本身 .然后你可以用 style():

定位它

tooltip
  .style("left", `${d3.pointer(event)[0]}px`)
  .style("top", `${d3.pointer(event)[1]}px`)

见d3.pointer().

无法在 Angular 中的 d3.js 饼图上定位工具提示

Unable to position tooltip on d3.js pie chart in Angular

tooltip

d3.js

pie-chart

angular