javascript - 将力树约束到不规则边界 d3

Question

我将圆圈（节点）放在等值线图上。我推导出每个状态特征的质心，并将其用作圆 x 和 y 坐标。状态特征通过 json 文件加载。然后我调用一个 d3 力模拟，将它们很好地聚集在每个状态的中心周围。这对大多数州都很有效，直到您到达佛罗里达或加利福尼亚这样又长又细的地方，并且节点出现在州边界之外。是否可以将力模拟约束在不规则形状的状态边界内？可能使用 d3.polygon 来测试该点是否仍在商店内。但我不知道怎么做。我的代码目前如下所示：

parent.selectAll('circle')
        .data(d => d.votes)
        .enter()
        .call(sim)
        .append('circle')
        .attr('id', d => d.id + d.name)
        .attr('cx', d => d.x)
        .attr('cy', d => d.y)
        .attr('r', circleSize)

    } // eslint-disable-line

    function sim(dots) {
            const data = dots.data()
            const simulation = d3.forceSimulation(data)
                .force("x", d3.forceX(function (d) { return d.x }))
                .force("y", d3.forceY(function (d) { return d.y }))
                .force("collide", d3.forceCollide(d => (circleSize * 1.3)))
            for (var i = 0; i < 600; ++i) simulation.tick()
        }

佛罗里达看起来像这样：

标签： javascriptd3.js