在缩放/拖动时缩放/重绘d3.js网格线

Question

我昨天刚开始使用d3.js，在完成工作时遇到一些麻烦。

现在，我创建了一个带有两个y轴的图表，每个y轴显示一些值，而x轴显示日期。

单击y轴上的值时，将显示相应的水平网格线。

我的问题是，当放大或缩小或拖动时，网格线（水平和垂直）不能随轴值正确缩放，它们根本不会移动。

今天下午我进行了很多搜索，找到了一些示例，但是似乎没有一个可以使用我已有的代码。

我认为，应该将逻辑添加到缩放行为中，但我不确定

// x axis gridlines
function make_x_gridlines() {   
  return d3.axisBottom(x)
      .ticks(5)
}


// add the X gridlines
let xGrid = svg.append("g")
  .attr('class', 'grid')     
  .attr("id", "grid")
  .attr("transform", "translate(0," + height + ")")
  .call(make_x_gridlines()
      .tickSize(-height)
      .tickFormat("")
  )

//zoom behavior
function zoomed() {
  .. some behavior ..

  //redraw gridlines here?

  .. some behavior ..
}

请看整个小提琴。

我称第二个y轴（右）为zAxis，即使它不是z轴。

帮助将不胜感激。

Answer 1

缩放时，轴正在工作。这是因为，在该功能中zoomed()您正在更新比例。

因此，为了使网格缩放，您也只需要更新其比例即可。将此代码放在函数中zoomed()，它应该可以工作。

xGrid.call(
    d3.axisBottom(x)
        .scale(d3.event.transform.rescaleX(x))
        .ticks(5)
        .tickSize(-height)
        .tickFormat("")
    )

现在，您只需要将此比例更新复制到所有其他网格。抱歉，我无法给您完整的答案，但是我现在没有太多时间。

现在，在我看来，您不应该拥有该功能，make_gridlines()因为它确实很简单，并且当您在不同地方进行大量更新时，这会使我感到困惑。

因此，make_gridlines()您不必致电而是致电d3.axisBottom(x).ticks(5)。

（请注意，我是d3和js的新手，所以我建议根据我的一点经验和知识）