D3.js缩放和平移可折叠树图

Question

我使用D3.js来绘制可折叠树图，如example。它的工作大部分都很好，但是当它进入正常功能时，图表的尺寸可能会发生显着变化（即现在我没有几个节点，我会有更多的批次）。

我想让SVG区域滚动，我尝试了所有我在网上找到的东西，使其工作，但没有成功。我工作得最好的就是使用d3.behaviour.drag，我在其中拖动整个图表。它远非最佳，并且有许多问题，但它有点可用。

即便如此，我正试图清理它一点，我意识到d3.behaviour.zoom也可以用于平底锅根据API文档。

问题：任何人都可以解释如何适应它到我的代码？

我希望能够潘 SVG区域的图表，如果可能使它对一些误用做出反应，即尝试从视口中移出图表，并启用缩放到最大视口的尺寸...

这是我到目前为止的代码：

var realWidth = window.innerWidth; 
var realHeight = window.innerHeight; 

function load(){ 
    callD3(); 
} 

var m = [40, 240, 40, 240], 
    w = realWidth -m[0] -m[0], 
    h = realHeight -m[0] -m[2], 
    i = 0, 
    root; 

var tree = d3.layout.tree() 
    .size([h, w]); 

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

var vis = d3.select("#box").append("svg:svg") 
    .attr("class","svg_container") 
    .attr("width", w) 
    .attr("height", h) 
    .style("overflow", "scroll") 
    .style("background-color","#EEEEEE") 
    .append("svg:g") 
    .attr("class","drawarea") 
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")") 
    ; 

var botao = d3.select("#form #button"); 

function callD3() { 
//d3.json(filename, function(json) { 
d3.json("D3_NEWCO_tree.json", function(json) { 
    root = json; 
    d3.select("#processName").html(root.text); 
    root.x0 = h/2; 
    root.y0 = 0; 

    botao.on("click", function(){toggle(root); update(root);}); 

    update(root); 
}); 

function update(source) { 
    var duration = d3.event && d3.event.altKey ? 5000 : 500; 

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

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

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

    // Enter any new nodes at the parent's previous position. 
    var nodeEnter = node.enter().append("svg:g") 
     .attr("class", "node") 
     .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) 
     .on("click", function(d) { toggle(d); update(d); }); 

    nodeEnter.append("svg:circle") 
     .attr("r", function(d){ 
        return Math.sqrt((d.part_cc_p*1))+4; 
     }) 
     .attr("class", function(d) { return "level"+d.part_level; }) 
     .style("stroke", function(d){ 
     if(d._children){return "blue";} 
     })  
     ; 

    nodeEnter.append("svg:text") 
     .attr("x", function(d) { return d.children || d._children ? -((Math.sqrt((d.part_cc_p*1))+6)+this.getComputedTextLength()) : Math.sqrt((d.part_cc_p*1))+6; }) 
     .attr("y", function(d) { return d.children || d._children ? -7 : 0; }) 
     .attr("dy", ".35em") 
     .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) 
     .text(function(d) { 
     if(d.part_level>0){return d.name;} 
     else 
      if(d.part_multi>1){return "Part " + d.name+ " ["+d.part_multi+"]";} 
      else{return "Part " + d.name;} 
     }) 
     .attr("title", 
      function(d){ 
       var node_type_desc; 
       if(d.part_level!=0){node_type_desc = "Labour";}else{node_type_desc = "Component";} 
       return ("Part Name: "+d.text+"<br/>Part type: "+d.part_type+"<br/>Cost so far: "+d3.round(d.part_cc, 2)+"&euro;<br/>"+"<br/>"+node_type_desc+" cost at this node: "+d3.round(d.part_cost, 2)+"&euro;<br/>"+"Total cost added by this node: "+d3.round(d.part_cost*d.part_multi, 2)+"&euro;<br/>"+"Node multiplicity: "+d.part_multi); 
     }) 
     .style("fill-opacity", 1e-6); 

    // Transition nodes to their new position. 
    var nodeUpdate = node.transition() 
     .duration(duration) 
     .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); 

    nodeUpdate.select("circle") 
     .attr("r", function(d){ 
      return Math.sqrt((d.part_cc_p*1))+4; 
     }) 
     .attr("class", function(d) { return "level"+d.part_level; }) 
     .style("stroke", function(d){ 
     if(d._children){return "blue";}else{return null;} 
     }) 
     ; 

    nodeUpdate.select("text") 
     .style("fill-opacity", 1); 

    // Transition exiting nodes to the parent's new position. 
    var nodeExit = node.exit().transition() 
     .duration(duration) 
     .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) 
     .remove(); 

    nodeExit.select("circle") 
     .attr("r", function(d){ 
      return Math.sqrt((d.part_cc_p*1))+4; 
     }); 

    nodeExit.select("text") 
     .style("fill-opacity", 1e-6); 

    // Update the links… 
    var link = vis.selectAll("path.link") 
     .data(tree.links(nodes), function(d) { return d.target.id; }); 

    // Enter any new links at the parent's previous position. 
    link.enter().insert("svg:path", "g") 
     .attr("class", "link") 
     .attr("d", function(d) { 
     var o = {x: source.x0, y: source.y0}; 
     return diagonal({source: o, target: o}); 
     }) 
    .transition() 
     .duration(duration) 
     .attr("d", diagonal); 

    // Transition links to their new position. 
    link.transition() 
     .duration(duration) 
     .attr("d", diagonal); 

    // Transition exiting nodes to the parent's new position. 
    link.exit().transition() 
     .duration(duration) 
     .attr("d", function(d) { 
     var o = {x: source.x, y: source.y}; 
     return diagonal({source: o, target: o}); 
     }) 
     .remove(); 

    $('svg text').tipsy({ 
     fade:true, 
     gravity: 'nw', 
     html:true 
    }); 

    // Stash the old positions for transition. 
    nodes.forEach(function(d) { 
    d.x0 = d.x; 
    d.y0 = d.y; 
    }); 

    var drag = d3.behavior.drag() 
     .origin(function() { 
      var t = d3.select(this); 
      return {x: t.attr("x"), y: t.attr("y")}; 
     }) 
     .on("drag", dragmove); 

    d3.select(".drawarea").call(drag); 

} 

// Toggle children. 
function toggle(d) { 
    if (d.children) { 
    d._children = d.children; 
    d.children = null; 
    } else { 
    d.children = d._children; 
    d._children = null; 
    } 

} 

function dragmove(){ 
    d3.transition(d3.select(".drawarea")) 
    .attr("transform", "translate(" + d3.event.x +"," + d3.event.y + ")"); 
} 
} 

Answer 1

你可以看到（大部分）工作实施此处http://jsfiddle.net/nrabinowitz/fF4L4/2/

关键件的位置：

• 请致电d3.behavior.zoom()在svg元素上。这要求svg元素具有pointer-events: all集。你也可以在子元素上调用它，但是如果你想让整个事物平移和缩放，我不会看到任何理由，因为你基本上希望整个SVG区域响应平移/缩放事件。

  d3.select("svg") 
      .call(d3.behavior.zoom() 
       .scaleExtent([0.5, 5]) 
       .on("zoom", zoom)); 
  

• 设置scaleExtent这里给你限制缩放比例的能力。您可以将其设置为[1, 1]以完全禁用缩放，或者将其设置为编程的最大内容大小，如果这就是您想要的（我不确定此处的确切内容）。

• 的zoom功能类似于您dragmove功能，但包括比例因子，并设置上泛偏移限制（据我所知，D3没有任何内置panExtent支持）：

  function zoom() { 
      var scale = d3.event.scale, 
       translation = d3.event.translate, 
       tbound = -h * scale, 
       bbound = h * scale, 
       lbound = (-w + m[1]) * scale, 
       rbound = (w - m[3]) * scale; 
      // limit translation to thresholds 
      translation = [ 
       Math.max(Math.min(translation[0], rbound), lbound), 
       Math.max(Math.min(translation[1], bbound), tbound) 
      ]; 
      d3.select(".drawarea") 
       .attr("transform", "translate(" + translation + ")" + 
         " scale(" + scale + ")"); 
  } 
  

  （说实话，我并不认为我在这里有正确的左右阈值的逻辑 - 这似乎并没有限制放大时的正确拖动。留作练习给读者:)。）

• 为了让这里的东西比较简单，它有助于有g.drawarea元素没有初始转换 - 所以我增加了一个g元素外包装纸来设置保证金抵消：

  vis // snip 
      .append("svg:g") 
      .attr("class","drawarea") 
      .append("svg:g") 
      .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); 
  

这里的其他更改只是为了让您的代码在JSFiddle中更好地工作。这里有一些缺失的细节，但希望这足以让你开始。