svg - 如何使用c3js在条形图/饼图/面积图中获取渐变颜色填充

Question

我正在使用基于 d3js 的 c3js 绘制图表(使用 SVG 元素)。

c3js 是否支持条形图、饼图和面积图的线性渐变着色？目前我能够让它工作，但它是一个 hack。

在堆叠条形图中也很难获得圆角条，因为 SVG 不支持 stroke left|right|top|bottom 选项。

我还观察到即使在 NVd3 和 Dimple.js 中也不支持线性渐变和圆形条形图。

如果c3js支持这两个特性就好了。

Answer 1

因为我可以从 c3 init 回调函数中访问 d3 对象，所以我在 init 上附加了一个线性渐变并从我的填充样式(在我的 css 中)调用它。

Javascript:

oninit: function () {

  d3.select('svg').append("linearGradient")
    .attr("id", "timeframe-gradient")
    .attr("gradientUnits", "userSpaceOnUse")
    .attr("x1", 0).attr("y1", 0)
    .attr("x2", 0).attr("y2", 100)
    .selectAll("stop")
    .data([
      {offset: "60%", color: "#666", opacity: 0},
      {offset: "100%", color: "#666", opacity: 1}
    ])
    .enter().append("stop")
    .attr("offset", function(d) { return d.offset; })
    .attr("stop-color", function(d) { return d.color; })
    .attr("stop-opacity", function(d) { return d.opacity;});

}

CSS(SASS):

.event-timeframe {
  rect {
    fill: url(#timeframe-gradient);
  }
}