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

Question

我昨天才开始使用 d3.js，但在完成我的工作时遇到了一些问题。

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

点击 y 轴上的值，我会显示相应的水平网格线。

我的问题是，在放大或缩小或拖动时，网格线（水平和垂直）无法根据轴值正确缩放，它们根本就不动。

我今天下午进行了很多搜索，找到了一些如何操作的示例，但其中 none 似乎可以使用我已有的代码。

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

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

完整内容请参阅this fiddle。

我将第二个 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的新手，所以我根据我的一点经验和知识推荐这个)

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

Scale / Redraw d3.js gridlines on zoom / drag

javascript

gridlines

zooming

d3.js