d3防止文本扩展到SVG之外

Question

我有通过D3生成的折线图,文本显示在悬停时指针的右侧.问题是出现在最右边的文本是由SVG的边缘切断的.我知道一个简单的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";
     }
})