Question

我想实现这个D3力布局示例;

http://bl.ocks.org/mbostock/7882658

但我不想使用圈子，我想使用正方形。

我尝试构建碰撞功能，但只有在禁用重力时它才有效。这不是我想要的。

this.collide = function collide(quadtree, node, alpha) {

    var that = this, d = node, doSnap = false;

    quadtree.visit(function(quad, x1, y1, x2, y2) {

        var q = quad.point,
            val,
            dif,
            inX,
            inY,
            wy,
            hx,
            a,
            b;

        val = 100 * (Math.pow(e.alpha, 2));;

        // Don't compare an element to itself,
        // don't modify fixed elements
        if (!q || q == d || d.fixed) {
            return;
        }

        // Calculate bounding coordinates
        a = that.getCoordinates(d, d.width, d.height);
        b = that.getCoordinates(q, q.width, q.height);

        // If they don't overlap at all, do nothing
        if (!that.doesOverlap(a, b)) {
            return;
        }

        // Calculate Minkowski sum
        wy = (a.width + b.width) * (a.cy - b.cy);
        hx = (a.height + b.height) * (a.cx - b.cx);

        if (wy > hx) {
            if (wy > -hx) {
                // Collision on the top
                a.point.y += val;
            } else {
                // Collision on the left
                a.point.x -= val;
            }
        } else {
            if (wy > -hx) {
                // Collision on the right
                a.point.x += val;
            } else {
                // Collision on the bottom
                a.point.y -= val;
            }
        }
    });
};

Answer 1

力布局中的力是基于将节点视为点并指定它们之间的目标距离来计算的，因此如果将每个方格视为节点，则方形对象之间的排斥力将不会考虑角落。

但是，您可以将每个方块视为与链接相关的节点集合。节点可以放置在广场的所有角落和中心。由于节点可以根据函数获得目标距离，因此可以使中心节点比角节点有效“更大”。这将为您提供近似正方形的布局，而无需计算力。

使用矩形而不是圆形的强制布局

1 个答案: