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

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。