7 jun
2017

d3 v4 aplicar zoom al centro

Estoy intentando buscar un equivalente al d3.behavior.zoom() de la version v3 de d3.js. Pero hasta ahora no he podido encontrar nada.

Lo que busco es poder hacer .center([width / 2, height / 2]), es decir, que el zoom se aplique siempre al centro del grafico y no hacia la posicion del raton.

Me gustaria saber si hay algun equivalente en la v4 ya que han eliminado esta funcionalidad.

Editado

Os dejo el codigo del zoom que yo tengo hecho, este funciona, pero se aplica al centro sino a la posicion del raton.

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

            svg.call(zoom);
            function zoomed() {
                var posicionIni = w/2;              
                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);

            }   
            d3.select("#botonZoom")
                .on("click", resetted);
            function resetted() {
              svg.transition()
                  .duration(750)
                  .call(zoom.transform, d3.zoomIdentity);
            }

Os dejo el resto del codigo de como creo el grafico:

//-----------------------------------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, 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
            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", "green");

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


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

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


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

               ;

Edicion 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script src="datos_puntos.json"></script>   
    <script type="text/javascript" src="d3/d3.js"></script>
    <script type="text/javascript" src="d3/d3.min.js"></script>
    <script type="text/javascript" src="d3/jquery.min.js"></script>
    <style type="text/css">

            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }

            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }

        </style>
</head>
    <body>
        <div id="linegraph"></div>
        <button id="botonZoom"> Reset </button>
        <button class="play">play</button>
        <button class="pause" disabled>pause</button>
        <button class="stop" disabled>stop</button>
        <input type="checkbox" name="planned_checked"  id="eae" > eaepunt1
        <input type="checkbox" name="planned_checked"  id="arab" > arabpunt1
        <input type="checkbox" name="planned_checked"  id="planned_checked" > Cola
        <input style="width:10px" value="1" type="numeric" name="tamanio_cola" id="tamanio_cola"/>Tamaño cola
<script>

 ///Aqui esta el codigo de arriba
</script>    
</body>
</html>

Edicion 3

He conseguido un ejemplo, con el zoom funcionando como yo quiero, pero no consigo aplicarlo a mi script. Aqui el ejemplo.

COMENTARIOS

DEJA TU COMENTARIO

© 2017 website by Rubit Corporation