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

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

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，y，将很有帮助。

链接JsFiddle

最佳答案

我现在了解您的问题。我更新了您的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 + ")");
}

希望这能解决您的问题。