D3 v4只需缩放到中心

Question

是否有明显的d3 V4等效于V3 d3.behavior.zoom（）

.center（[width / 2，height / 2]）语法。

（我已经四处搜索了，手动缩放的大多数工作示例都是在V3中运行的...而API文档并没有提到它我能说的最好。）

我试图添加手动zoomin / out按钮，使用示例：

https://bl.ocks.org/mbostock/7ec977c95910dd026812作为基础，但使用V4。

编辑

Harpal给我看了一个在d3 v4中工作的例子 ，但我不知道如何应用于我的项目。

所以有我的脚本：

//-----------------------------------Variables ---------------------------------------------------------------------------
            //Alto y ancho
            var w = 500;
            var h = 500;
            var padding = 0;
            var coundata= 0;
            var maxx = 0.30
            var minx = -0.30
            var maxy = 6
            var miny = -6

//-----------------------------------CREAR GRAFICO SCATTER ----------------------------------------------------------------
            //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,5])
                                 .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
            grupo = svg.append("svg:g");

            var c2 = grupo.append("rect")
                .attr("width", (w/2) - padding)             
                .attr("height", (h/2)- padding)
                .attr("transform", "translate("+w/2+","+padding+")")
                .attr("fill", "rgba(0, 255, 0, 0.3)");

            var c1 = grupo.append("rect")
                .attr("width", (w/2) - padding)             
                .attr("height", (h/2)- padding)
                .attr("transform", "translate("+padding+","+padding+")")
                .attr("fill", "rgba(255, 255, 0, 0.3)");


            var c3 = grupo.append("rect")
                .attr("width", (w/2) - padding)             
                .attr("height", (h/2)- padding)
                .attr("transform", "translate("+padding+","+h/2+")")
                .attr("fill", "rgba(255, 0, 0, 0.3)");

            var c4 = grupo.append("rect")
                .attr("width", (w/2) - padding)             
                .attr("height", (h/2)- padding)
                .attr("transform", "translate("+w/2+","+h/2+")")
                .attr("fill", "rgba(255, 165, 0, 0.3)");


            var g =svg.append("g");

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

            nowData = []
            var grupo2 = svg.append("svg:g");


            //Creamos los puntos
            var datos = grupo2.selectAll("circle")
               .data(nowData)
               .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;
               })
                .append("svg:title") 
                    .text(function(d) {return "Valor x: "+d[0] +"\n Valor y :"+d[1]; })                     

               ;
            var grupoLineas = svg.append("svg:g");
//--------------------------------- ZOOM---------------------------------------------------------------------              
            var zoom = d3.zoom()                            
                // Don’t allow the zoomed area to be bigger than the viewport.
                .scaleExtent([1, Infinity])
                .translateExtent([[0, 0], [w, h]])
                .extent([[0, 0], [w, h]])
                .on("zoom", zoomed);                


            grupo.style("transform-origin","50% 50% 0");
            grupo2.style("transform-origin","50% 50% 0");
            grupoLineas.style("transform-origin","50% 50% 0");
            svg.style("transform-origin","50% 50% 0");
            gX.style("transform-origin","50% 50% 0");
            gY.style("transform-origin","50% 50% 0");

            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)));                      
                grupo2.attr("transform",d3.event.transform);
                grupoLineas.attr("transform",d3.event.transform);
                grupo.attr("transform",d3.event.transform);         
            }   
            function resetted() {
              svg.transition()
                  .duration(750)
                  .call(zoom.transform, d3.zoomIdentity);
            }
            d3.select("#zoom_in")
                .on("click",function(){
                    zoom.scaleBy(svg, 2);
                })
            d3.select("#zoom_out")
                .on("click",function(){
                    zoom.scaleBy(svg, 0.5);
                })              
//---------------------------------------Funcion mostrarDatos ----------------------------------------------------------            
            function mostrarDatos(){
                nowData=[]
                grupo2.selectAll("circle")
                    .data(nowData)
                    .exit()
                    .remove()
                if($("#eae").prop('checked') == true)               
                {   
                    nowData.push(eaepunt1[coundata])                                    
                    grupo2.selectAll("circle")

                }               

                if($("#arab").prop('checked') == true)
                {
                    nowData.push(arabpunt1[coundata])                                                               

                }                                           
                console.log(nowData)

                grupo2.selectAll("circle")
                   .data(nowData)
                   .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;
                   })
                    .append("svg:title") 
                        .text(function(d) {return "Valor x: "+d[0] +"\n Valor y :"+d[1]; })                
                   ;
            }
            $("#eae").change(function()
            {
                mostrarDatos();
            });

            $("#arab").change(function()
            {
                mostrarDatos()
            }); 

我应用("transform-origin","50% 50% 0"); 但它无法正常工作

Answer 1

你可以做2件事

• 首先，将缩放直接应用于中心：

    var zoom = d3.zoom() // Don't allow the zoomed area to be bigger than the viewport. .scaleExtent([1, Infinity]) .translateExtent([[0, 0], [w, h]]) .extent([[0, 0], [w, h]]) .on("zoom", zoomed); grupopadre.style("transform-origin", "50% 50% 0"); svg.call(zoom); function zoomed() { grupopadre .style('transform', 'scale(' + d3.event.transform.k + ')'); } 

• 其次，缩小时将图形居中：

    var zoom = d3.zoom() // Don't allow the zoomed area to be bigger than the viewport. .scaleExtent([1, Infinity]) .translateExtent([[0, 0], [w, h]]) .extent([[0, 0], [w, h]]) .on("zoom", zoomed); grupopadre.style("transform-origin", "50% 50% 0"); svg.call(zoom); function zoomed() { grupopadre.attr("transform",d3.event.transform); } 

  您需要创建一个包含所有svg内容的组。

Answer 2

不确定是否能回答你的问题，但在这里你可以看到V4中的类似例子： https ： //bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f

您可以在版本4的D3 API Docs中找到有关缩放行为的详细文档，我认为没有更明显的方法没有记录： https ： //github.com/d3/d3/blob/master /API.md#zooming-d3-zoom

Answer 3

您可以将transform-origin添加到您执行缩放的元素的style属性：

.style("transform-origin", "50% 50% 0")

编辑

在这里工作Plnkr

Answer 4

我想现在只是d3.zoom（）

var zoom = d3.zoom()
            // Don’t allow the zoomed area to be bigger than the viewport.
            .scaleExtent([1, Infinity])
            .translateExtent([[0, 0], [width, height]])
            .extent([[0, 0], [width, height]])
            .on("zoom", zoomed);

Answer 5

这是我找到的解决方案：

function zoomed() {
    var scale = d3.event.transform.k; 
    grupopadre.attr("transform", "translate(" + 0 + ")scale(" + scale + ")");
}