d3.js强制布局在加载后自动缩放/缩放

Question

我使用Flowingdata.com的this nice force layout创建网络图。

我图目前显示与他们的关系，5和750之间的节点。它适用于一些自定义更改以适应我的需求。但有一件事我无法去工作。我有一个viewBox与preserveAspectRatio自动适合它所在的容器。但取决于节点的数量总是有一些节点围绕边缘（主要是顶部和底部）被切断。如果节点非常少，则会在中间显示它们，周围有巨大的空间（这是一个很大的容器）。

是否有任何方法可以自动缩放或缩放布局以自动适应？因此，一个大布局有点缩小，一个小布局放大。我有一个缩放事件设置，所以滚动和平移就像一个魅力。但它可以自动做到这一点，以适应内容？

的d3.js启动代码：

 vis = d3.select(selection) 
     .append("svg") 
     .attr("viewBox", "0 0 " + width + " " + height) 
     .attr("preserveAspectRatio", "xMidYMid meet") 
     .attr("pointer-events", "all") 
     .call(d3.behavior.zoom().scaleExtent([.1, 3]) 
         .on("zoom", redraw)).append('g'); 

Answer 1

您可以在节点迭代;获取所有节点的最大和最小x和y值，并计算所需的缩放和平移以涵盖SVG大小内的所有viz。

我有一段代码将图形居中到给定节点;这可能会帮助你了解一个想法。

zs = zoom.scale() 
zt = zoom.translate(); 
dx = (w/2.0/zs) - d.x; 
dy = (h/2.0/zs) - d.y; 
zoom.translate([dx, dy]); 
zoom.scale(zs); 

其中，w，h为我的SVG画布的宽度和hieight，和d我想中心的节点。

而不是集中在d.x，d.y，你应该计算平均值x和y。并计算缩放比例，以使图形的宽度（和高度）适合SVG的宽度（和大小）选择两者中较大的缩放比例。

Answer 2

你的代码应与此类似

vis = d3.select(selection) 
     .append("svg") 
     .attr("viewBox", "0 0 " + width + " " + height) 
     .attr("preserveAspectRatio", "xMidYMid meet") 
     .attr("pointer-events", "all") 
     .call(zoomListener) 
     .on("zoom", redraw)); 

    var mainGroup = vis.append('g'); 

    function zoom() { 
     mainGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale +    ")"); 
    }  

    var zoomListener = d3.behavior.zoom().on("zoom", zoom); 

    var xArray = YOUR_NODES.map(function(d) { //YOUR_NODES is something like json.nodes after forse.end() 
     return d.x 
    }); 

    var minX = d3.min(xArray); 
    var maxX = d3.max(xArray); 

    var scaleMin = Math.abs(width/(maxX - minX)); 
    var startX = (minX)/scaleMin; 
    var startY = 50/scaleMin; 

    // Same as in the zoom function 
    mainGroup.attr("transform", "translate(" + [startX, startY] + ")scale(" + scaleMin + ")"); 

    // Initialization start param of zoomListener 
    zoomListener.translate([startX, startY]); 
    zoomListener.scale(scaleMin); 
    zoomListener.scaleExtent([scaleMin, 1]) 
    vis.call(zoomListener); 

只为X轴此代码工作。因为“全球圈”RX === RY。如果不适合你，那么你可以为yAxis添加相同的逻辑var startY。此外，您还需要考虑圆节点的cr来调整初始坐标。

Answer 3

迄今为止所有其他答案都需要访问数据，并对其进行迭代，因此复杂度至少为O(nodes)。我一直在寻找并找到一种完全基于已经渲染的视觉尺寸的方式，getBBox()希望是O(1)。它的内容或布局方式无关紧要，只是它的大小和父容器的大小。我设法此基础上http://bl.ocks.org/mbostock/9656675掀起：

var root = // any svg.select(...) that has a single node like a container group by #id 

function lapsedZoomFit(ticks, transitionDuration) { 
    for (var i = ticks || 100; i > 0; --i) force.tick(); 
    force.stop(); 
    zoomFit(transitionDuration); 
} 

function zoomFit(transitionDuration) { 
    var bounds = root.node().getBBox(); 
    var parent = root.node().parentElement; 
    var fullWidth = parent.clientWidth || parent.parentNode.clientWidth, 
     fullHeight = parent.clientHeight || parent.parentNode.clientHeight; 
    var width = bounds.width, 
     height = bounds.height; 
    var midX = bounds.x + width/2, 
     midY = bounds.y + height/2; 
    if (width == 0 || height == 0) return; // nothing to fit 
    var scale = 0.85/Math.max(width/fullWidth, height/fullHeight); 
    var translate = [fullWidth/2 - scale * midX, fullHeight/2 - scale * midY]; 

    console.trace("zoomFit", translate, scale); 

    root 
     .transition() 
     .duration(transitionDuration || 0) // milliseconds 
     .call(zoom.translate(translate).scale(scale).event); 
} 

Answer 4

这里有两个例子：

力布局，支持自动变焦（画布）：

https://vida.io/documents/pT3RDxrjKHLQ8CQxi

力布局，支持自动变焦（ SVG）

https://vida.io/documents/9q6B62xQgnZcYYen2

对SVG执行缩放和绘制的函数：

function scaleAndDraw() { 
    var xExtent = d3.extent(d3.values(nodes), function(n) { return n.x; }), 
     yExtent = d3.extent(d3.values(nodes), function(n) { return n.y; }); 

    if ((xExtent[1] - xExtent[0]) > config.width) { 
    scaleX = (xExtent[1] - xExtent[0])/config.width; 
    scaleY = (yExtent[1] - yExtent[0])/config.height; 

    scale = 1/Math.max(scaleX, scaleY); 

    translateX = Math.abs(xExtent[0]) * scale; 
    translateY = Math.abs(yExtent[0]) * scale, 
    svg.attr("transform", "translate(" + 
     translateX + "," + translateY + ")" + 
     " scale(" + scale + ")"); 
    } 

    draw(); 
}