为每个 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;
}

（或者，如果您想在 y 尺度上每 10 个单位制作一个新的条带对，您只需制作 step=10; 并将 d3.range 更改为 d3.range(0,dataRange.extent/step)）

我在 jsfiddle 上分叉了某人的条形图并添加了条带 --> http://jsfiddle.net/k9c0peax/