添加c3.js填充而不切断图形 [英] Adding c3.js padding without cutting off graph

问题描述

这是对以下问题的回应：

我如何在那里没有填充和按钮没有例如，它应该看起来像：

解决方案

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

  d3.select（chart.element）.select（。+ c3。 chart.internal.fn.CLASS.chart）.attr（clip-path，null）; 
  

其中图表是您的C3图表对象

---

小提琴 -

---

然而，您最有可能希望点出现在轴层上方。为此你需要分离并附加图表层（在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 -

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:

解决方案

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/

---

这篇关于添加c3.js填充而不切断图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！