添加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);

Fidle - http://jsfiddle.net/7e1eL22f/