使用具有多个y轴的D3刷子

Question

我创建了一个D3可视化，其中包含散点图和折线图。它们共享一个x轴，但每个都有自己的y轴。我的问题涉及如何正确实现画笔并更新两个y轴。

正如您在这里看到的那样，y轴最初是正确的，并且一旦刷子关闭也会再次校正。然而，在刷牙期间＆＃39;两个y轴都设置为“左”和“左”。一。我知道为什么在我设置我的画笔时会发生这种情况：

brush = d3.svg.brush()
  .x(brushFilterXScale)
  .y(brushFilterTransactionsYScale)
  .on('brush', brushed);

我还有一个brushFilterBalanceYScale，它是右边轴的比例。我的问题是如何将这些比例传给brush以便我可以正确更新每个y轴？

Answer 1

我不知道这样做的直截了当的方法。但是，您可以在dat[!duplicated(t(apply(dat, 1, sort))),] 事件中反向映射它：

brush

这是一个有效的例子：

function brushed() {

  var extent = brush.extent(), //<-- the extent
      yDomain =  [extent[0][1], extent[1][1]]; //<-- the y domain of the extent

  y2.domain(
    [
      y2Brush.invert(yBrush(yDomain[0])), //<-- take the yDomain start, get it's pixel position, then invert that back into the domain of the y2Brush
      y2Brush.invert(yBrush(yDomain[1]))
    ]
  );