在不切断图形的情况下添加 c3.js 填充

Question

这是对以下问题的回应，，其中提供的答案解决了这个问题，但也引发了另一个问题——图表上的按钮在最后被切断了——

我怎样才能做到没有填充和按钮不被切断，例如，它应该看起来像：

Answer 1

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

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

其中 chart 是您的 C3 图表对象

Fiddle - 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/

在不切断图形的情况下添加 c3.js 填充

Adding c3.js padding without cutting off graph

javascript

d3.js

c3.js