javascript - d3 防止文本延伸到 SVG 之外

Question

我有通过 D3 生成的折线图，悬停时文本显示在指针的右侧。问题是出现在最右边的文本被 SVG 的边缘 chop 了。我知道一个简单的 overflow:visible 会允许它出现在外面，但我希望它留在 SVG 内。这可能吗？

Answer 1

你可以使用这个技巧:

• 如果光标在 A 区域:将文本或工具提示向右对齐
• 如果光标在 B 区:将文本或工具提示向左对齐

使用(svg_width/2)得到中间

text.style ("text-anchor", function () {
     var position = d3.mouse();  // position[0] <= x    position[1]  <= y
     if (position[0] < (svg_width/2) ) {
            // you are on A zone
            return "start";
     } else {
            // you are on B zone
            return "end";
     }
})