score:2

Accepted answer

i see two separate issues with the way the zoom is working:

  1. you are not selecting the <circle>s (points in the scatter plot) correctly when zooming. consequently when you zoom only the axes are changing (as you described). an easy way to fix this is to give each <circle> a class (e.g. class="dot"), and then use that to select them.

    first add the class="dot" to each of your circles (line ~140):

    svg.selectall("dot")
            .data(data)
            .enter().append("circle")
            .attr("class", "dot")
    

    then update the function zoom to select them correctly (line ~195):

    svg.selectall(".dot") // <---- select all circles with class "dot"
            .attr("cx", function(d) { return x(d.date); })
            .attr("cy", function(d) { return y(d.close); });
    
  2. right now the zoom only occurs when you try to zoom in on an axis or individual point. if you want a user to be able to zoom in no matter where their mouse is over your scatter plot, you can add a background <rect> that will make sure the zoom event is detected for the svg.

    svg.append("rect")
        .style("fill", "#fff")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    

making these two changes fixes the zoom.

gif of zooming


Related Query

More Query from same tag