2

我试图让 d3.forceRadial() 在它们各自的父节点周围分层分布节点，但是当我在力上设置 x 和 y 参数时，所有节点都朝右下角射出，并且 x 和 y 值结束上万..

我的代码如下所示：

let simulation = d3.forceSimulation()
    .force('radial', d3.forceRadial((d) => (d.distance * 100))
        .x((d) => ((d.parent && !isNaN(d.parent.x)) ? d.parent.x + d.parent.vx : 0))
        .y((d) => ((d.parent && !isNaN(d.parent.y)) ? d.parent.y + d.parent.vy : 0))
        .strength(3))
    .force('link', d3.forceLink().id((d) => (d.entity_id)).strength(0))
    .nodes(data.nodes);

其中 parent 是对父节点的引用，d.distance 是距根节点的步数。我已经尝试将所有节点的 x 和 y 预先设置为 0 但无济于事..

4

1 回答 1

2

不幸的是，在当前版本（撰写本文时为 4.13.0）中，d3.forceRadial不接受and方法的函数，尽管它确实接受了该方法的函数。x()y()radius()

我们可以看到这个检查源代码。

这是代码radius()：

force.radius = function(_) {
    return arguments.length ? (radius = typeof _ === "function" ? _ :
        constant(+_), initialize(), force) : radius;
};

如您所见，它接受一个函数。

但这是和的x()代码y()：

force.x = function(_) {
    return arguments.length ? (x = +_, force) : x;
};

force.y = function(_) {
    return arguments.length ? (y = +_, force) : y;
};

如您所见，它不接受函数。

您还可以看到API只讨论数字，而不是函数。关于radial.x：

如果指定了 x，则将圆心的 x 坐标设置为指定的数字并返回此力。（强调我的）

也是如此radial.y。

于 2018-01-31T13:50:34.160 回答