D3.js 多图表上的组合弹性

我想通过函数设置条形图的轴，但不在

elasticY（）

语法范围内。这里的用例是，我有两个相同维度/组的条形图，如下所示：

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

及

这些都可以工作，但elasticY（）分别设置域，这意味着两个图表的轴不对齐。我可以设置

.y（d3.scaleLinear（）.domain（[0100]））

，但这会使图表保持静态。我更喜欢这样做：

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

但这似乎不起作用。

.elasticY（true）

使图表在每次绘制图表时计算最小值和最大值，并将其应用于Y刻度的域

如果您想要更复杂的行为，您可以设置

elasticY（false）

并添加

preRender

和

preRedraw

，以您想要的方式设置域

这里有一个函数

• 获取图表列表
• 创建一个

  preRender

  /

  preRedraw

  处理程序，该处理程序
  • 通过连接所有图表的

    .group（）.all（）

    ，并应用
  • 并将域

    [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);

---

.

您使用的是哪个图表？您有

elasticY（true）

设置吗？Elastic每次都会计算域，听起来好像你不想这样。如果禁用了elastic，您的第一个代码应该可以工作。图表会将比例设置为轴，所以不应该执行第二个代码。啊！是的，我确实有弹性套。我试试看，谢谢！你知道有没有一种方法可以动态设置域（即响应新的过滤器）？这就是elasticY应该做的？我很困惑，是手动设置还是自动设置？对不起，这超出了原始问题的范围。但我有三个柱状图，我想强制在同一个轴上。elasticY根据单个图表的值设置每个轴。将它们设置为静态域更好，但将它们设置为所有观测值的最大域最好。不过，你最初的问题回答了这个问题。如果你重复下面的内容，我会检查。请编辑你的问题以反映新的、更有趣的问题。我认为原来的问题已经涵盖得够多了，没有必要回答它。

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