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

D3.js 使用矩形而不是圆形的强制布局,d3.js,D3.js,我想实现这个D3部队布局示例 但我不想用圆,我想用正方形 我试图构造一个碰撞函数,但它只有在禁用重力的情况下才有效。这不是我想要的 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.poi

我想实现这个D3部队布局示例

但我不想用圆,我想用正方形

我试图构造一个碰撞函数,但它只有在禁用重力的情况下才有效。这不是我想要的

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

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

但是,可以将每个正方形视为通过链接连接的节点集合。节点可以放置在广场的所有角落和中心。由于节点可以基于函数设置其目标距离,因此可以使中心节点有效地“大于”角节点。这将为您提供近似正方形的布局,而无需计算力