Scaling / redrawing d3.js grid lines when scaling / dragging

Question

I just started using d3.js yesterday, and I have some problems getting my things.

At the moment, I have created a chart with two y axes, each of which shows some values, and the x axis shows dates.

When clicking on the y-axis values, I show the corresponding horizontal grid lines.

My problem is that when scaling or drawing or dragging the grid lines (horizontal and vertical) do not scale correctly with the axis values, they just don't move at all.

Today I searched a lot and found some examples of how to do this, but none of them seem to work with the code that I already have.

I assume that logic should be added to the scaling behavior, but I'm not sure

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

Please see this script for all this.

I named the second y axis (right) zAxis, even if it is not a z axis.

Help would be greatly appreciated.

Answer 1

Axes work when scaling. This is because in the function zoomed()you are updating the scale.

So, in order to scale the grids, you just need to update its scale. Put this code inside the function zoomed()and it should work.

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, )