D3 v4 调整缩放到中心

Question

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

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

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

我正在尝试添加手动缩放 in/out 按钮，使用示例：

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

编辑

Harpal show me an 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

不确定这是否回答了您的问题，但您可以在此处看到 V4 中的类似示例：https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f

您可以在 D3 API 版本 4 的文档中找到有关缩放行为的详细文档，我认为没有更多 "obvious" 方法没有记录：https://github.com/d3/d3/blob/master/API.md#zooming-d3-zoom

Answer 2

您可以将 transform-origin 添加到执行缩放的元素的 style 属性：

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

编辑

工作计划here

Answer 3

我认为现在只是 d3.zoom()

var zoom = d3.zoom()
            // Don’t allow the zoomed area to be bigger than the viewport.
            .scaleExtent([1, Infinity])
            .translateExtent([[0, 0], [width, height]])
            .extent([[0, 0], [width, height]])
            .on("zoom", zoomed);

Answer 4

你可以做 2 件事

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

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

Answer 5

这是我找到的解决方案：

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

D3 v4 调整缩放到中心

D3 v4 ajust zoom to center

javascript

zooming

d3.js

编辑