SVG 元素被切断

【问题标题】：SVG element getting Cut OffSVG 元素被切断
【发布时间】：2019-07-18 13:05:56
【问题描述】：

看到这个DEMO

当悬停在 X 轴的起点或终点时，标记图形位置的红点会被切断（分别从左侧或右侧）。

有什么办法可以避免吗？

【问题讨论】：

标签： css svg charts overflow billboard.js

【解决方案1】：

尝试使用clipPath 选项。

bb.generate({
    ...,
    clipPath: false
});

编辑：

如果您不需要设置 y 轴最小/最大值，将按预期工作
如果您需要设置 y 轴最小值/最大值，则需要进行一些自定义。
如下添加onafterinit 选项，将按预期工作。

onafterinit: function() {
    this.mainArea.node().parentNode
        .setAttribute("clip-path",
            this.getClipPath.bind({config:{clipPath:true}})(this.clipId)
        );
}

【讨论】：

只有Y轴从0开始才有效，否则会弄乱轴下方的部分，看这个demo，知道吗？