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

D3变焦仅影响轴而不影响数据

2 个答案: