各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; 
} 

（、あるいは、あなたが作りたい場合あなたはちょうど step=10;を作成し、d3.rangeを d3.range(0,dataRange.extent/step)に変更するyスケールで10単位ごとに新しいストライプペア

私はjsfiddleに誰かの棒グラフをオフにフォークやストライピングを追加 - >http://jsfiddle.net/k9c0peax/