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.