Question

我目前更新的解决方案......

var myZoom = d3.behavior.zoom()
              .scaleExtent([.3, 10])
              .on("zoom", zoom);

var container = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 500)
    .style('border', '1px solid black') 
    .call(myZoom);

var trans1 = 250;
function sneakyTranslate1() {
    if(trans1 <= 0) return 0;
    trans1 = trans1 - .5;
    return trans1;
}
var trans2 = 250;
function sneakyTranslate2() {
    if(trans2 <= 0) return 0;
    trans2 = trans2 - .5;
    return trans2;
}
//I am centering my node here, but if I pan the node it jumps
var svg = container.append("g").attr("transform", "translate(250,250)"); 

 function zoom() { svg.attr("transform", "translate(" + 
    (d3.event.translate[0]+sneakyTranslate1()) + "," + 
    (d3.event.translate[1]+sneakyTranslate2()) + ")scale(" + d3.event.scale +
     ")"); }

为了澄清我想最初居中我的单个节点，然后允许平移和缩放作为默认工作。用户可以在添加更多节点时担心居中和平移。

我目前的解决方案是翻译我的节点所在的组。将该平移的偏移量添加到缩放功能中的缩放矢量，然后慢慢减小偏移值并将其恢复为0。

如果有人知道这样做的更好方法或重新设置缩放和x，那么在开始绘制节点之前，节点会很有帮助。

链接JsFiddle

Answer 1

我现在了解你的问题。我更新了你的jsFiddle here。

问题是即使您正在翻译SVG container，您也没有翻译缩放（我知道有点奇怪）。基本上zoom函数认为您正在尝试放大SVG容器最初的位置（0,0），但是因为您将容器移动到其他位置（250,250），您必须移动myZoom对象所以它知道从哪里放大。

所以，如果你看，我添加了这个

//I am centering my node here, but if I pan the node it jump 
var svg = container.append("g").attr("transform", "translate(250,250)");

// translate zoom function so it knows where to zoom from
myZoom.translate([250,250]);

因此它知道将缩放对象转换为容器所在的位置。我也把它还原了。

function zoom() {
  svg.attr("transform",
  "translate(" + d3.event.translate + ")"
  + " scale(" + d3.event.scale + ")");
}

希望这能解决您的问题。

D3如何在启用平移/缩放的情况下居中元素？

1 个答案: