D3.js围绕文字的箭头般的路径

Question

我想重现这个漂亮的箭头tooltip，因为无法访问源代码我问自己： 如何为适合重叠文本块的工具提示主体创建“背景”路径。

我是否必须创建文本元素，然后通过getBoundingClientRect()计算宽度并将其宽度插入自定义路径？

编辑：刚刚在bostock的非缩小js中找到了解决方案。

var tooltipRect = tooltipContent.node().getBoundingClientRect(),
    tooltipWidth = tooltipRect.width,
    tooltipHeight = tooltipRect.height;

tooltipPath
    .attr("width", tooltipWidth)
    .attr("height", tooltipHeight + 6)
  .select("path")
    .attr("d", "M0,0"
        + "H" + tooltipWidth
        + "v" + tooltipHeight
        + "H" + (tooltipWidth / 2 + 6)
        + "l-6,6"
        + "l-6,-6"
        + "H0"
        + "z");

tooltipOverlay
    .style("left", (d.x + margin.left - tooltipWidth / 2) + "px")
    .style("top", (d.y + margin.top - tooltipHeight - 6) + "px");