Question

我试图让D3网络达到一个漂亮的布局（alpha达到0）后冻结。我希望力完全停止，即使拖动节点（用户应该能够手动重新排列节点）。我想我知道如何通过修改mousedown和mouseup为节点调用的函数来完成第二部分。但是，我无法获得原始布局并冻结工作。

我查看了"static" force layouts的示例，其中只有在布局完成后才会显示网络。但是，我希望网络能够在达到稳定布局时显示。我将此添加到绘制网络的函数的末尾：

while (force.alpha() >0.005) {
    force.tick();
}
force.stop();

通过此添加，网络在到达force.stop()之前不会显示。有没有人知道如何在“滴答作响”时让它显示出来？

编辑：这是我对tick函数的实现：

function tick(e) {

console.log(force.alpha());
if (force.alpha() <0.05) {
    force.stop();
}
var h = svgH;

if (e.alpha < 0.05) {
    var q = d3.geom.quadtree(nodes),
    i = 0,
    n = nodes.length;

    while (++i < n) {
        q.visit(collide(nodes[i], e.alpha));
    }
}   


path.attr("d", function(d) {

    // Total difference in x and y from source to target
    diffX = d.target.x - d.source.x;
    diffY = d.target.y - d.source.y;

    // Length of path from center of source node to center of target node
    pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));

    // x and y distances from center to outside edge of target node
    offsetX = (diffX * d.target.radius) / pathLength;
    offsetY = (diffY * d.target.radius) / pathLength;

    if (d.target.y < d.source.y) {
        var avgY = (d.target.y + d.source.y)/2;

        if (d.target.fixed != true) {
            d.target.y = avgY;
        }
        if (d.source.fixed != true) {
            d.source.y = avgY;
        }
    } 

    return "M" + d.source.x + "," + d.source.y + "L" + (d.target.x - offsetX) + "," + (d.target.y - offsetY);
});

// Keep circles within bounds of screen
var r = 6;
circle.attr("cx", function(d) { return d.x = Math.max(r + d.radius, Math.min(w - r, d.x)); })
        .attr("cy", function(d) {
            return d.y = Math.max(d.radius, Math.min(h - d.radius, d.y));
        });

        text.attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
        });
}

Answer 1

检查tick事件处理程序中的停止条件 - 这样您就可以在每个刻度线上重绘网络并停止。

D3：显示网络到达布局，然后停止强制

1 个答案: