d3 forceSimulation节点在链接中重叠

Question

我正在尝试使用d3创建流程图。

我已经使用d3-force浏览了示例。

我可以使用它，但我想不出如何避免Links与Nodes重叠。

这是我的代码：

var svg = d3.select("#graph_alert_svg");
    var width = 100;
    var height = 100;
    let rad = 10;

    var simulation = d3.forceSimulation()
        .force("link", d3.forceLink().id(function(d) { return d.id; })) 
        .force("charge", d3.forceManyBody())
        .force("center", d3.forceCenter(width / 2, height / 2))    

    var link = svg.append("g")
        .attr("class", "links")
        .selectAll("line")
        .data(graph.links)
        .enter().append("line");

    var node = svg.append("g")
        .attr("class", "nodes")
        .selectAll("g")
        .data(graph.nodes)
        .enter()
        .append("circle")
        .attr("r", rad)
        .attr("fill", "none")
        .attr("stroke", "#059EC3")
        .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));


    simulation
        .nodes(graph.nodes)
        .on("tick", ticked);

    simulation.force("link")
        .links(graph.links);

    function ticked() {
        link
            .attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

        node
            .attr("transform", function(d){ return `translate(${d.x},${d.y})`;})
    }

    function dragstarted(d) {
        if (!d3.event.active) simulation.alphaTarget(0.3).restart();
        d.x = d.x;
        d.y = d.y;
    }

    function dragged(d) {
        d.x = d3.event.x;
        d.y = d3.event.y;
    }

    function dragended(d) {
        if (!d3.event.active) simulation.alphaTarget(0);
        d.x = null;
        d.y = null;
    }

和我的html

<svg id="graph_alert_svg" viewBox="0 0 100 100">

</svg>