Question

我正在研究d3中的节点图（见此处：http://jsfiddle.net/u56Tr/1）图表本身非常圆形（链接/节点在所有方向上相对均匀地展开） - 我如何更好地适应一个16：9的窗口？我假设我必须扩展元素的x，y位置，但我不能完全正确。

相关的D3代码：

force.on("tick", function() {
link.attr("x1", function(d) {
    return d.source.x;
})
    .attr("y1", function(d) {
        return d.source.y;
    })
    .attr("x2", function(d) {
        return d.target.x;
    })
    .attr("y2", function(d) {
        return d.target.y;
    });
node_bg.attr("cx", function(d) {
    return d.x;
})
    .attr("cy", function(d) {
        return d.y;
    });
node.attr("x", function(d) {
    return d.x - (d.group > 0 ? 24 : 32);
})
    .attr("y", function(d) {
        return d.y - (d.group > 0 ? 24 : 32);
    });

});

Answer 1

您可以轻松地挤出图表以更好地适应16：9。

9/16是.5625。在这个fiddle中，您只需查找包含.5625的行，这就是您压缩图表所需的全部内容。

在另一个fiddle中，您可以看到您的图表被完全粉碎，并且具有较小的常量。 :)。

由于图表有一点混乱的外观，也许你的情况好的常数大约是0.4。这样就可以更加确定地适应16：9。

Answer 2

力布局的要点是自动布局这样的图形，这样您就不必自己指定节点的位置。它是如何做的很大程度上受节点之间的连接影响。由于其高连接性，您拥有的图形不适合以宽屏幕格式布局 - 也就是说，许多节点连接到许多其他节点。如果你要拉伸图形，一些链接会比其他链接长得多，一些节点会比其他节点更接近 - 这正是力布局所阻止的。

您当然可以手动“破解”布局以达到您想要的效果 - 例如，您可以为每个链接指定不同的链接距离/强度，以便您想要更大的链接距离/强度更弱。同样，您可以指定一个充电函数，将较弱的排斥电荷分配给您想要更靠近的节点。

但是，对于所有这些，您需要很好地了解完成后图形的外观。完全放弃力布局可能更容易，只需自己指定节点的位置即可。

d3.js - 如何水平扩展力导向图？

2 个答案: