多个图表上的组合elasticY

Question

我想通过函数设置条形图的轴，但不在elasticY()语法的范围内。这里的用例是我在同一维/组中有两个条形图，如下所示：

chart1
.dimension(dim).group(gr)
.valueAccessor(d => d.value.one)
.elasticY()

和

chart1
.dimension(dim).group(gr)
.valueAccessor(d => d.value.two)
.elasticY()

这些工作，但是elasticY（）分别设置域，这意味着两个图表的轴不对齐。我可以设置.y(d3.scaleLinear().domain([0,100]))，但这会使图表保持静态。我更喜欢做的是：

.valueAccessor(function(d) {
result = func(d)// function to return the max of value.one and value.two
chart1.y().domain([0, result])
return d.value.one;
}

但是这似乎不起作用。

Answer 1

[.elasticY(true)使图表每次绘制图表时都计算最小值和最大值，并将它们应用于Y比例尺的域。

如果您想要更复杂的行为，则可以设置elasticY(false) and add preRenderandpreRedraw` handlers来按照您想要的方式设置域。

这里是一个功能，>

• 获取图表列表
• 创建一个preRender / preRedraw处理程序，
  • 通过连接所有图表的.group().all()并应用d3.max()，计算所有图表中所有值的最大值
  • 并将域[0, maxY]应用于图表
  • 呼叫.rescale()告诉图表比例已更改：

处理程序：

const common_elasticY = charts => chart => {
    const maxY = d3.max(Array.prototype.concat.apply([],
        charts.map(c => c.group().all())), kv => kv.value);
    chart.y().domain([0, maxY]);
    chart.rescale();
};
在图表列表上实例化处理程序：

const preHandler = common_elasticY([yearBarChart, spendBarChart]);
为每个图表安装preRender和preRedraw事件的处理程序：

yearBarChart.on('preRender', preHandler)
  .on('preRedraw', preHandler);
spendBarChart.on('preRender', preHandler)
  .on('preRedraw', preHandler);

Demo fiddle。