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

标签 javascript css d3.js svg text

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

enter image description here

最佳答案

你可以使用这个技巧:

enter image description here

  • 如果光标在 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";
     }
})

关于javascript - d3 防止文本延伸到 SVG 之外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37892835/

相关文章:

html - 计算的 Z-Index 与元素样式不匹配

javascript - 链接转换

javascript - D3.js 中的数据操作

javascript - Kefir.js - 如何从回调函数流式传输事件?

javascript - Highcharts ,类型错误: obj is null

javascript - 为什么我的 JavaScript 计算器不能使用 base.html?

javascript - 选择 <path> d3.js

javascript - 将图像放置在折线图中的 Y 轴标签上

php - 在弹出窗口中仅显示所有标题的第一个标题信息

css - 使用 [ngStyle] Angular2 隐藏表格数据 <td>