0

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.

10
  • Puedes poner el codigo y elemento sobre el que quieras el zoom?
    – lois6b
    Commented el 20 mar. 2017 a las 15:16
  • @lois6b Claro, la cosa es que el zoom ya funciona, pero aplica el zoom al lugar que esta el cursor, antes en la v3 de d3.js se podia hacer como digo pero ahora la verdad que no se como hacer. Commented el 20 mar. 2017 a las 15:19
  • 1
    pero pon tu codigo para que podamos trabajar sobre él
    – lois6b
    Commented el 20 mar. 2017 a las 15:20
  • @lois6bn editado, espero que podais ayudarme Commented el 20 mar. 2017 a las 15:25
  • 1
    Pon el html para que podamos probar una posible solución usando un snippet
    – ffflabs
    Commented el 20 mar. 2017 a las 19:37

1 respuesta 1

1

Ya he conseguido hacerlo, hay que aplicar el estilo transform-origin","50% 50% 0"

Ademas he añadido todos los elementos a un grupo padre para ahorrar lineas de codigo.

La funcion de zoom me ha quedado tal que asi:

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 + ')');
            }

De esta manera se aplica el zoom directamente al centro del grafico.

Si se necesita la posibilidad de moverte en el grafico y que el zoom centre solo el grafico cuando lo quitas hay que ponerlo asi:

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.