Javascript D3 v4 A快速缩放到中心

是否有明显的D3V4与V3 d3.behavior.zoom（）等价

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

（我四处搜索过，大多数手动缩放等工作示例都在V3中运行……API文档并没有尽我所能地提到它。）

我尝试添加手动缩放按钮，示例如下：

作为基础，但使用V4

编辑 给我看一个D3V4版本的工作，但我不知道如何应用到我的项目中

这就是我的剧本：

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

---

我应用

（“变换原点”，“50%50%0”）但它不能正常工作
不确定这是否回答了您的问题，但在这里您可以在V4中看到类似的示例：

您可以在版本4的D3 API文档中找到有关缩放行为的详细文档，我认为没有比这更“明显”的方式没有文档记录：
您可以将
转换原点
添加到
样式
属性，以执行缩放：

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

编辑

正在工作的Plnkr
我想现在只是d3.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);                

    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内容的组

以下是我找到的解决方案：

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

我看到了这个例子，但缩放不是从中心开始的，而是从光标位置开始的。当你缩小（图形居中）时，这个方法有效，但我需要一直将反缩放应用到图形的中心，而不是光标位置。好的，这个例子有效，你能检查编辑并说明我需要如何在脚本中应用吗？
function zoomed() {
    var scale = d3.event.transform.k; 
    grupopadre.attr("transform", "translate(" + 0 + ")scale(" + scale + ")");
}