javascript - D3 v4 调整缩放到中心

Question

是否有明显的 d3 V4 等同于 V3 d3.behavior.zoom()

.center([width/2, height/2]) 语法。

(我四处搜索，大多数手动缩放的工作示例等都在 V3 中运行......并且 API 文档没有尽我所能提及它。)

我正在尝试添加手动放大/缩小按钮，使用示例:

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

编辑

Harpal给我看一个example在 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

你可以做两件事

• 首先，将缩放直接应用到中心:

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