Zoom only zooms my axis and not the objects on my graph

Question

I have a current zoom function I just learned to use in D3. However when I use it, it only moves my and zooms the axis of the graph not the objects on it.

I'm very knew to D3 and would like some help please.

My source code of the javascript is posted below:

    //Setting generic width and height values for our SVG.
    var margin = {top: 60, right: 0, bottom: 60, left: 40},
        width = 1024 - 70 - margin.left - margin.right,
        height = 668 - margin.top - margin.bottom;

     //Other variable declarations.


    //Creating scales used to scale everything to the size of the SVG.
    var xScale = d3.scale.linear()
        .domain([0, 1024])
        .range([0, width]);

    var yScale = d3.scale.linear()
        .domain([1, 768])
        .range([height, 0]);

    //Creates an xAxis variable that can be used in our SVG.
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");

    //Zoom command ...
    var zoom = d3.behavior.zoom()
        .x(xScale)
        .y(yScale)
        .scaleExtent([1, 10])
        .on("zoom", zoomed);


    // The mark '#' indicates an ID. IF '#' isn't included argument expected is a tag such as "svg" or "p" etc..
    var SVG = d3.select("#mainSVG")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                .call(zoom);


    //Create background. The mouse must be over an object on the graph for the zoom to work. The rectangle will cover the entire graph.
    var rect = SVG.append("rect")
        .attr("width", width)
        .attr("height", height);

    //This selects 4 circles (non-existent, there requires data-binding) and appends them all below enter.
    //The amount of numbers in data is the amount of circles to be appended in the enter() section. 
    var circle = SVG
        .selectAll("circle")
        .data([40,100,400,1900])
        .enter()
            .append("circle")
            .attr("cx",function(d){return xScale(d)})
            .attr("cy",function(d){return xScale(d)})
            .attr("r",20);

    //This appends a circles to our SVG.
    var circle = SVG
        .append("circle")
        .attr("cx",function(d){ return xScale(d)})
        .attr("cy",300)
        .attr("r",20);



    //Showing the axis that we created earlier in the script for both X and Y.
    var xAxisGroup = SVG.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    var yAxisGroup = SVG.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    function zoomed() {
       SVG.select(".x.axis").call(xAxis);
       SVG.select(".y.axis").call(yAxis);
    }

Answer 1

You also need to redraw all the elements with the changed axes on zoom -- D3 won't do this for you automatically:

function zoomed() {
   SVG.select(".x.axis").call(xAxis);
   SVG.select(".y.axis").call(yAxis);

   SVG.selectAll("circle")
      .attr("cx",function(d){return xScale(d)})
      .attr("cy",function(d){return xScale(d)});
}