如何用D3变焦行为代替ViewBox变换

Question

我想利用D3的缩放行为功能，但我需要使用viewBox属性来完成SVG的所有转换/缩放，而不是使用D3示例：http://bl.ocks.org/mbostock/3680999中所示的转换方法。

如何仅使用viewBox实现相同的比例/转换？到目前为止，这是我的代码，它不像转换方法那样工作得很好。

function zoomed(d) {
  if (!scope.drawLine) {
    var scale = d3.event.scale;
    var translation = d3.event.translate;

    //This works, but I can't use it for reason's I won't go into now
    //mapSVG_G.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");

    var newViewBox = [
      initialViewBox[0] - translation[0],
      initialViewBox[1] - translation[1],
      initialViewBox[2]/scale,
      initialViewBox[3]/scale
      ];
      mapSVG.attr('viewBox', newViewBox);
    }
}

Answer 1

有点离谱，但可以作为一个开始：

主板：

var newViewBox = [
    -translate[0] / scale,
    -translate[1] / scale,
    width / scale,
    height / scale
].join(" ");

整体示例：

​

var width = 960,
  height = 500;

var randomX = d3.random.normal(width / 2, 80),
  randomY = d3.random.normal(height / 2, 80);

var data = d3.range(2000).map(function() {
  return [
    randomX(),
    randomY()
  ];
});

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .attr("viewBox", [0, 0, width, height].join(" "))

var vis = svg.append("g")
  .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
  .append("g");

vis.append("rect")
  .attr("class", "overlay")
  .attr("width", width)
  .attr("height", height);

vis.selectAll("circle")
  .data(data)
  .enter().append("circle")
  .attr("r", 2.5)
  .attr("transform", function(d) {
    return "translate(" + d + ")";
  });

function zoom() {
  var scale = d3.event.scale;
  var translate = d3.event.translate;

  var newViewBox = [
    -translate[0] / scale,
    -translate[1] / scale,
    width / scale,
    height / scale
  ].join(" ");
  
  svg.attr('viewBox', newViewBox);

}

.overlay {
  fill: none;
  pointer-events: all;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

​