D3缩放仅在轴上有效，在数据上无效

Question

I am new with d3 library and I making some test. I have a scatter plot with 4 quadrants and I'm trying to apply zoom. When I zoom the scale of axis change, but the data position no.

Here the code:

//-----------------------------------CREAR GRAFICO SCATTER (sin nada en especial)-------------------------------------
            //Alto y ancho
            var w = 500;
            var h = 500;
            var padding = 0;

            var maxx = 0.30
            var minx = -0.30
            var maxy = 6
            var miny = -6
            //Static dataset
            var dataset = [
                            [0.12, 4], [0.05, 3], [0.15, -3], [-0.20, -5], [-0.10, 3]
                          ];

            //Funciones de escala
            var xScale = d3.scaleLinear()
                                 .domain([minx, maxx])
                                 .range([padding, h]);

            var yScale = d3.scaleLinear()
                                 .domain([miny, maxy])
                                 .range([h, padding]);

            var rScale = d3.scaleLinear()
                                 .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                                 .range([2, 6]);

            //Eje x
            var xAxis = d3.axisBottom()
                .scale(xScale);;

            //Eje y
            var yAxis = d3.axisLeft()
                .scale(yScale);

            //Crear el elemento svg
            var svg = d3.select("#linegraph")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);




            //Colores
            var c1 = svg.append("rect")
                .attr("width", (w/2) - padding)             
                .attr("height", (h/2)- padding)
                .attr("transform", "translate("+padding+","+padding+")")
                .attr("fill", "yellow");

            var c2 = svg.append("rect")
                .attr("width", (w/2) - padding)             
                .attr("height", (h/2)- padding)
                .attr("transform", "translate("+w/2+","+padding+")")
                .attr("fill", "green");

            var c3 = svg.append("rect")
                .attr("width", (w/2) - padding)             
                .attr("height", (h/2)- padding)
                .attr("transform", "translate("+padding+","+h/2+")")
                .attr("fill", "red");

            var c4 = svg.append("rect")
                .attr("width", (w/2) - padding)             
                .attr("height", (h/2)- padding)
                .attr("transform", "translate("+w/2+","+h/2+")")
                .attr("fill", "orange");

            //Añadimos el eje x
            var gX = svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0," + (h/2) + ")")
                .call(xAxis);

            //Añadimos el eje y
            var gY = svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + (w/2)  + ",0)")
                .call(yAxis);

            //Creamos los puntos
            var datos = svg.selectAll("circle")
               .data(dataset)
               .enter()
               .append("circle")
               .attr("cx", function(d) {
                    return xScale(d[0]);
               })
               .attr("cy", function(d) {
                    return yScale(d[1]);
               })
               .attr("r", function(d) {
                    return 5;
               });


//--------------------------------- ZOOM---------------------------------------------------------------------              
            var zoom = d3.zoom()
                .scaleExtent([1, 40])
                .translateExtent([[-100, -100], [w + 90, h + 100]])
                .on("zoom", zoomed);

            svg.call(zoom);
            function zoomed() {
              svg.attr("transform", d3.event.transform);
              gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
              gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));                          
            }

This is the plot without zoom:

And this with zoom:

As you can see the data points and the quadrants color do not affect zoom, but in scale of axis it does.

Answer 1

because of you attr svg transform ,try g=svg.append("g") and then use g append rect . and in zoomed function g.attr("transform",d3.event.transform)

Answer 2

Try to add this line:

datos.attr("transform",d3.event.transform)

The zoomed function is something like this:

        var zoom = d3.zoom()
            .scaleExtent([1, 40])
            .translateExtent([[-100, -100], [w + 90, h + 100]])
            .on("zoom", zoomed);

        svg.call(zoom);
        function zoomed() {
            svg.attr("transform", d3.event.transform);
            gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
            gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));        
            datos.attr("transform",d3.event.transform)
        }