Adding c3.js padding without cutting off graph

问题

This is in response to the following question, How to remove padding in c3.js?, where the answer that was provided solves this issue, but also raises another issue -- the buttons on the graph are cut off at the end --

How would I get there to be no padding and the buttons not to be cut off, for example, it should look like:

回答1:

The dots are getting clipped off because of the clip-path set on the chart layer. You just have to remove it. You can use D3 for this, like so

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

where chart is your C3 chart object

---

Fiddle - http://jsfiddle.net/zds67nh1/

---

---

However you most probably want the dots to appear above the axis layer. For that you need to detach and attach the chart layer (in SVG, the z-index is determined by the order - the last of the siblings come on top. So you have to basically move it to the end of the siblings list), like so

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/

---

来源：https://stackoverflow.com/questions/32468108/adding-c3-js-padding-without-cutting-off-graph