Viewbox定位麻烦，svg左上角移动

Question

我无法将svg放在视图框的中间。我尝试更改转换中的坐标，但是，如果我调整浏览器的大小，则svg不会粘在中间。

以下是我的问题代码和截图：

function BuildVerticaLTree(treeData, treeContainerDom) {

  var contextMenuList = [
    {
      title: 'Remove Node',
      action: function(elm, d, i) {

        if (d.parent && d.parent.children){
          var nodeToDelete = _.where(d.parent.children, {name: d.name});
          if (nodeToDelete){
            d.parent.children = _.without(d.parent.children, nodeToDelete[0]);
          }
          update(d);
        }
      }
    },
    {
      title: 'Synopsis',
      action: function(elm, d, i) {

        console.log("Option 2 clicked");
        console.log("Node Name: "+ d.name);
        setNodeTopic(d.name);
      }
    }
  ];

  var margin = {top: 40, right: 120, bottom: 20, left: 600},
    width = 960 - margin.right - margin.left,
    height = 900 - margin.top - margin.bottom;

  var i = 0;

  var tree = d3.layout.tree()
    .size([height, width])
    .nodeSize([80,80])

  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", "xMidYMin meet")
    .attr("viewBox", "0 0 1200 1200")
    //.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")
    //.attr("transform","translate("+"0"+","+"0"+")");
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var root = treeData;

  update(root);

  function update(source) {

    // Compute the new tree layout.
    var nodes = tree.nodes(root).reverse(),
      links = tree.links(nodes);

    // Normalize for fixed-depth.
    nodes.forEach(function(d) { d.y = d.depth * 100; });

    // Declare the nodes…
    var node = svg.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });

    // Enter the nodes.
    var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")"; });

    nodeEnter.append("circle")
      .attr("r", 30)
      .attr("stroke","steelblue")
      .attr("stroke-width","5px")
      .style("fill", "#fff");

    nodeEnter.append("text")
      .attr("y", function(d) {
        return -10;
      })
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.name; })
      .style("fill-opacity", 1);

    // Declare the links…
    var link = svg.selectAll("path.link")
      .data(links, function(d) { return d.target.id; });

    // Enter the links.
    link.enter().insert("path", "g")
      .attr("class", "link")
      .attr("d", diagonal);

  }
}

BuildVerticaLTree(that.objectList, "#tree");