d3 防止文本延伸到 SVG 之外

【问题标题】：d3 keeping text from extending outside of SVGd3 防止文本延伸到 SVG 之外
【发布时间】：2016-06-18 03:03:11
【问题描述】：

我有通过 D3 生成的折线图，并且文本出现在悬停时指针的右侧。问题是出现在最右侧的文本被 SVG 的边缘截断。我知道一个简单的overflow:visible 可以让它出现在外面，但我希望它留在 SVG 里面。这可能吗？

【问题讨论】：

【解决方案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";
     }
})

【讨论】：