爲每個y軸組設置動態區域

Question

我想實現圖表的替代區域背景，有點像條形表格的外觀。

有沒有辦法讓我爲每個y軸塊動態設置區域？一旦我可以做到這一點，我可以基本上使用CSS來設置交替的背景顏色。

Answer 1

區域可以靜態地設置這樣的： http://c3js.org/samples/region.html

要動態地做到這一點，你只需要使用API​​： http://c3js.org/reference.html#api-regions例如

chart.regions([ 
    {axis: 'x', start: 5, class: 'regionX'}, 
    {axis: 'y', end: 50, class: 'regionY'} 
]); 

因此，要獲得交替的條紋建立一個區域數組作爲這樣產生的chart對象後：

// find range of all data 
var allData = d3.merge (chart.data().map(function(d) { 
    return d.values.map (function(dd) { return dd.value; }); 
})); 
var dataRange = d3.extent(allData); 
dataRange.min = Math.min (dataRange[0], 0); 
dataRange.extent = dataRange[1] - dataRange.min; 

// set number of pairs of stripes 
var stripeCount = 5; 
var step = dataRange.extent/stripeCount; 
var newRegions = []; 
// then divide the data range neatly up into those pairs of stripes 
d3.range(0,stripeCount).forEach (function(d) { 
    newRegions.push ({axis: 'y', start: dataRange.min+(step*d), end: dataRange.min+(step*(d+0.5)), class: 'stripe1'}); 
    newRegions.push ({axis: 'y', start: dataRange.min+(step*(d+0.5)), end: dataRange.min+(step*(d+1)), class: 'stripe2'}); 
}); 

// set the new regions on the chart object 
chart.regions(newRegions); 

CSS：

.c3-region.stripe1 { 
    fill: #f00; 
} 

.c3-region.stripe2 { 
    fill: #0f0; 
} 

（或者，如果你想使一個新的條帶對，每10個單位在y尺度上，您只需製作step=10;並將d3.range更改爲d3.range(0,dataRange.extent/step)）

我分叉斷別人的線圖上的jsfiddle，並添加了條紋 - >http://jsfiddle.net/k9c0peax/