Viewbox定位故障,svg左上移动 我很难把我的SVG放在检视框的中间。我试图改变变换中的坐标,但是,如果我调整浏览器的大小,SVG就不会在中间。< /P>

Viewbox定位故障,svg左上移动 我很难把我的SVG放在检视框的中间。我试图改变变换中的坐标,但是,如果我调整浏览器的大小,SVG就不会在中间。< /P>,svg,viewbox,Svg,Viewbox,下面是我的代码和问题的屏幕截图: function BuildVerticaLTree(treeData, treeContainerDom) { var contextMenuList = [ { title: 'Remove Node', action: function(elm, d, i) { if (d.parent && d.parent.children){ var nodeToDelete

下面是我的代码和问题的屏幕截图:

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");

“如果你想把它放在中间,难道你不想要XMIDYMID吗?”罗伯特朗森感谢你的回复。我确实试过了,但是没有什么不同。