添加 c3.js 填充而不切断图形

Question

这是对以下问题的回应，How to remove padding in c3.js? ，所提供的答案解决了这个问题，但也提出了另一个问题——图表上的按钮在最后被切断——

我如何才能没有填充并且按钮不会被切断，例如，它应该看起来像：

Answer 1

由于clip-path图表图层上的设置，这些点被剪掉了。你只需要删除它。您可以为此使用 D3，就像这样

d3.select(chart.element).select("." + c3.chart.internal.fn.CLASS.chart).attr("clip-path", null);

chart你的 C3 图表对象在哪里

小提琴 - http://jsfiddle.net/zds67nh1/

但是，您很可能希望点出现在轴层上方。为此，您需要分离并附加图表层（在 SVG 中，z-index 由顺序决定 - 最后一个兄弟姐妹排在最前面。所以您必须基本上将其移动到兄弟姐妹列表的末尾），像这样

var chartLayer = d3.select(chart.element).select("." + c3.chart.internal.fn.CLASS.chart);
var chartLayerParentNode = chartLayer.node().parentNode;
var chartLayerNode = chartLayer.remove();
chartLayerParentNode.appendChild(chartLayerNode.node());

chartLayer.attr("clip-path", null);

小提琴 - http://jsfiddle.net/7e1eL22f/