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

我正在使用来自Flowingdata.com的 this nice force layout创建一个网络图.

我的图表目前显示了5到750个节点之间的关系.它适用于一些自定义更改以适应我的需要.但是有一件事我不能上班.我有一个viewBox与preserveAspectRatio自动适应它所在的容器.但是,根据节点的数量,边缘总是有一些节点(主要是top和buttom)被切断.如果节点很少,它会在中间显示它们,它周围有巨大的空白空间(它是一个大的容器).

有没有办法自动缩放或缩放布局自动适应？所以一个大的布局有点缩小,一个小的布局放大.我有一个缩放事件设置,所以滚动和平移工作就像一个魅力.但是它能自动地做到这一点来适应内容吗？

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

解决方法

迄今为止所有其他答案都需要访问数据,并通过它进行迭代,所以复杂度至少为O(节点).我一直在寻找并找到一种完全基于已经呈现的视觉大小的方法,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);
}

原文地址：https://www.jb51.cc/js/154237.html