javascript - D3 forceRadial() 嵌套数据以父为中心

Question

我试图让 d3.forceRadial() 围绕它们各自的父级分层分布节点，但是当我在 force 上设置 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 但无济于事..

Answer 1

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

我们可以看到这个检查 source code .

这是 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:

If x is specified, sets the x-coordinate of the circle center to the specified number and returns this force. (emphasis mine)

radial.y 也是如此。