D3縮放僅在軸上有效，在數據上無效

Question

我是d3庫的新手，並且進行了一些測試。 我有一個具有4個象限的散點圖，我正在嘗試應用縮放。 當我縮放軸的比例時會改變，但是數據位置沒有。

這里的代碼：

//-----------------------------------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)));                          
            }

這是沒有縮放的圖：

這與縮放：

如您所見，數據點和象限顏色不會影響縮放，但是會影響軸的比例。

Answer 1

由於您進行了attr svg轉換，請嘗試g=svg.append("g") ，然后使用g append rect。 以及縮放功能g.attr("transform",d3.event.transform)

Answer 2

嘗試添加以下行：

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

縮放功能如下所示：

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