Scale / Redraw d3.js gridlines on zoom / drag

Question

I just started using d3.js yesterday and i have some trouble getting my stuff done.

For now I created a chart with two y axes, each showing some values and an x axis showing dates.

On click on the values on the y axes, I display the corresponding horizontal grid lines.

My problem is, that when zooming in or out, or dragging, the gridlines (horizontal and vertical) don't scale correctly with the axes values, they just don't move at all.

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

I presume, that the logic should be added to the zoom 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 fiddle for the whole thing.

I called the second y axis (right) zAxis even if it's not a z axis.

Help would really be greatly appreciated.

Answer 1

The axes are working when you zoom. That's because, in the function zoomed() you are updating the scales.

So in order to make the grids zoom, you just need to update its scales too. 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("")
    )

Now you just need to replicate this scale update to all other grids. Sorry that I couldn't give you a complete answer, but I don't have much time right now.

---

Now, in my opinion, you should not have the function make_gridlines() because it is really simple, and when you're working on lots of updates on different places it confuses me.

So, instead of calling make_gridlines() you call d3.axisBottom(x).ticks(5).

(Note that I'm new to d3 and js, so I'm recommending this based on my little experience and knowledge)