Javascript 如何在D3.js中设置节点与其他svg元素之间的冲突

在我的例子中，我想设置所有的圆不仅相互碰撞，而且还与弧碰撞，我如何才能做到这一点，任何帮助都是感激的

---

您可以使用以下建议的技巧：在更新

.ticked（）

中节点的位置时，添加一个检查以确保没有将某些内容放置在边界之外。但是，要使边界成为有厚度的圆弧，而不是没有厚度的矩形，还需要做一些数学运算。

您可以使用以下建议的技巧：在更新

.ticked（）

中节点的位置时，添加一个复选框，以确保未在边界外放置任何对象。但是，要使边界成为有厚度的圆弧，而不是没有厚度的矩形，还需要做一些数学运算

    var simulation = d3.forceSimulation(nodes)
        .force('charge', d3.forceManyBody().strength(5))
        .force('x', d3.forceX().x((d) => {
            return centerGroup[topicArrayList.indexOf(d.topic)][0] * 0.9
        }))
        .force('y', d3.forceY().y((d) => {
            return centerGroup[topicArrayList.indexOf(d.topic)][1] * 0.9
        }))
        .force('collision', d3.forceCollide().radius((d) => {
            return d.radius;
        }))
        .on('tick', ticked);

    function ticked() {
        var u = d3.select('svg g')
            .selectAll('circle')
            .data(nodes);

        u.enter()
            .append('circle')
            .attr('r', function(d) {
                return d.radius;
            })
            .merge(u)
            .attr('cx', function(d) {
                return d.x;
            })
            .attr('cy', function(d) {
                return d.y;
            })

        u.exit().remove();
    }