D3.js 如何在c3js中分割不同颜色的样条线区域

我有c3js面积样条线与一个填充颜色，这是工作良好。我试图让图表的负片部分的颜色不同，所以低于0的区域有一种颜色，高于0的区域有另一种颜色。

---

也有可能在该区域的某个自定义区域上制作另一种颜色，比如从1到2标记。这可能吗？

您可以使用动态调整的渐变作为填充

就点数/图例颜色而言，它确实有一些附加颜色（但这些颜色可能被视为比单一颜色更真实）。您可以在onrendered例程中进一步更改这些

var chart = c3.generate({
    data: {
        columns: [
            ['data2', 130, 100, -340, 200, 150, 50]
        ],
        colors: {
            data2: 'url(#myGradient)',
        },
        type: 'area-spline'
    },
    oninit: function() {
        d3.select("svg defs").append("linearGradient")
          .attr("id", "myGradient")
          .attr("x1", 0)
          .attr("x2", 0)
          .attr("y1", 0)
          .attr("y2", 1)
          .html('<stop offset="0%" stop-color="red"/><stop offset="50%" stop-color="red" class="changer"/><stop offset="50.01%" stop-color="blue" class="changer"/><stop offset="100%" stop-color="blue"/>')
      ;
    },
    onrendered: function () {
            // get the bbox for the series you're interested in
        var path = d3.select("g.c3-areas-data2 > path");
        var pbbox = path.node().getBBox();

        var y = this.y; // the chart's y scale
        var zeroPoint = y(0);   // where zero sits on the scale

                // work out where zero sits in relation/ratio to the bbox
        var pct = (zeroPoint - pbbox.y) / pbbox.height;
        pct *= 100;

                // set that as the new gradient stop
        d3.selectAll("#myGradient stop.changer").data([pct, pct + .01])
            .attr("offset", function(d) { return d+"%"; })
         ;
    }
});

var图表=c3.generate({
数据：{
栏目：[
[data2'，130100，-34020015050]
],
颜色：{
数据2:“url（#myGradient）”，
},
类型：“面积样条线”
},
oninit:function（）{
d3.选择（“svg定义”）.追加（“linearGradient”）
.attr（“id”、“myGradient”）
.attr（“x1”，0）
.attr（“x2”，0）
.attr（“y1”，0）
.attr（“y2”，1）
.html（“”）
;
},
onrendered:function（）{
//获取您感兴趣的系列的bbox
var path=d3。选择（“g.c3-AREA-data2>路径”）；
var pbbox=path.node（）.getBBox（）；
var y=this.y；//图表的y刻度
var zeroPoint=y（0）；//零位于刻度上的位置
//计算出零相对于bbox的位置/比率
var pct=（零点-pbbox.y）/pbbox.height；
pct*=100；
//将其设置为新的渐变停止
d3.选择全部（“#myGradient stop.changer”）.数据（[pct，pct+.01]）
.attr（“偏移量”，函数（d）{返回d+“%”；}）
;
}
});

---

这似乎是不可能的。您可以查看该选项，但它的功能非常有限。