22

我正在使用来自 Flowingdata.com 的这个漂亮的力布局来创建网络图。

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

我的图表目前显示了 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');
4

3 回答 3

25

迄今为止，所有其他答案都需要访问数据，并对其进行迭代，因此复杂性至少为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);
}

编辑：以上适用于 D3 v3。缩放在 D3 v4 和 v5 中进行了更改，因此您必须对最后一部分进行一些小改动（下面的代码console.trace）：

var transform = d3.zoomIdentity
  .translate(translate[0], translate[1])
  .scale(scale);

root
  .transition()
  .duration(transitionDuration || 0) // milliseconds
  .call(zoom.transform, transform);

警告（未经测试，但要小心）：根据Ngo Quang Duong在评论中的说法，如果您的 SVGviewBox不是0 0 width height格式，您可能需要调整一些变量，但即使这样可能还不够：

var fullWidth  = parent.viewBox.baseVal.width ;
var fullHeight = parent.viewBox.baseVal.height;
var translate = [
    parent.viewBox.baseVal.x + fullWidth  / 2 - scale * midX,
    parent.viewBox.baseVal.y + fullHeight / 2 - scale * midY
];
于 2015-07-06T00:13:14.663 回答
1

您的代码应该与此类似

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

此代码仅适用于 xAxis。因为“全球圈”SVG RX === RY。如果它不适合您，那么您可以为 yAxis 添加相同的逻辑 var startY。此外，您需要考虑cr圆节点调整初始坐标。

于 2015-01-05T11:51:51.640 回答
0

您可以遍历节点；获取所有节点的最大和最小 x 和 y 值，并计算所需的缩放和平移以覆盖 SVG 大小内的所有可视化。

我有一段代码将图形集中到给定节点；这可能会帮助您了解情况。

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 画布的宽度和高度，d 是我想要居中的节点。

您应该计算平均 x 和 y，而不是以 dx,dy 为中心。并计算缩放比例，使图形的宽度（和高度）适合 SVG 的宽度（和大小） 选择两者中较大的缩放比例。

于 2013-04-26T13:33:05.497 回答