Question

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

现在我创建了一个包含两个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 ..
}

请参阅this fiddle了解整件事。

即使它不是z轴，我也调用了第二个y轴（右）zAxis。

非常感谢帮助。

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网格线

1 个答案: