D3js - 在视图框中重新定位树图

Question

我使用了viewbox来使我的树图能够根据浏览器窗口大小调整大小。但是，我无法将树定位在视图框的中心。我试图将transform-translate属性应用于图形，位置保持不变。我需要应用哪些属性/更改来定位树形图？下面，第一个图像是当前输出。图2显示了所需的输出。我附上了树形图的初始化代码。

var margin = { top: 40, right: 120, bottom: 20, left: 120 };
  var width = 700 - margin.right - margin.left;
  var height = 500 - margin.top - margin.bottom;

  var i = 0, duration = 750;
  var tree = d3.layout.tree()
    .nodeSize([110,110])

  var diagonal = d3.svg.diagonal()
    .projection(function (d) { return [d.x, d.y]; });

var svg = d3.select(treeContainerDom)
    .append("div")
    .classed("svg-container", true) //container class to make it responsive
    .append("svg")
    //responsive SVG needs these 2 attributes and no width and height attr
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr("viewBox", "-50 0 1000 1000")
    //.attr("viewBox", "0 0 "+width+" "+height)
    //class to make it responsive
    .classed("svg-content-responsive", true)
    .call(zm = d3.behavior.zoom().scaleExtent([0.5,2]).on("zoom", redraw)).append("g");