我在 d3js 中的有向图有问题，简而言之：

如果节点数

如果节点数 >= 24 一切都堆叠在 svg 的左上角，但如果我检查我的 html 代码，我会看到所有节点、链接和标签...

这是我的代码：

    var svg = d3.select("svg"),width = +svg.attr("width"),height = +svg.attr("height");

    var simulation = d3.forceSimulation()
        .force("x",d3.forceX().strength(8).x(  function(d){ return yScale(d.type) }))
        .force("y",d3.forceY().strength(10).y(height/2))
        .force("center",d3.forceCenter().x(width / 2).y(height / 2)) // Attraction to the center of the svg area
        .force("charge",d3.forceManyBody().strength(1)) // Nodes are attracted one each other of value is > 0
        .force("collide",d3.forceCollide().strength(0.9).radius(50).iterations(10)) // Force that avoids circle overlapping
        .force("link",d3.forceLink().distance(function(d){return d.link_distance}).strength(1))
    var yScale = d3.scalePoint()
    .domain([1,2,3])
    .range([150,width-150])
    .padding(0.6)
    .round(false);
    d3.json("{{=URL('professionista','get_current_plan_graph',extension=False)}}",function(error,graph) {
          if (error) throw error;
          var links =  graph.links;
          function getNeighbors(node) {
              return links.reduce(function(neighbors,link) {
                if (link.target.id === node.id) {
                  neighbors.push(link.source.id)
                } else if (link.source.id === node.id) {
                  neighbors.push(link.target.id)
                }
                return neighbors
              },[node.id])
            }

            function isneighborLink(node,link) {
              return link.target.id === node.id || link.source.id === node.id
            }
            function getNodeColor(node,neighbors) {
              if (Array.isArray(neighbors) && neighbors.indexOf(node.id) > -1) {
                if (node.type === 1)
                    return "#3C99FB"
                else if (node.type === 2)
                    return "#9EC2E2"
                else if (node.type === 3)
                    return "#577EA7"
                else
                    return '#dee2e6'
              }

              return '#dee2e6'
            }


            function getLinkColor(node,link) {
              return isneighborLink(node,link) ? '#000444' : '#E5E5E5'
            }

            function getTextColor(node,neighbors) {
              return Array.isArray(neighbors) && neighbors.indexOf(node.id) > -1 ? 'green' : 'black'
            }
        
            function selectNode(selectedNode) {
              var neighbors = getNeighbors(selectedNode)
              nodeElement.attr('fill',function(node) {
                return getNodeColor(node,neighbors) 
              })
              labelElement.attr('fill',function(node) {
                return getTextColor(node,neighbors)
              })
              linkElement.attr('stroke',function(link) {
                return getLinkColor(selectedNode,link)
              })
            }
        
          var linkElement = svg.append("g")
                            .attr("class","links")
                            .selectAll("line")
                            .data(graph.links)
                            .enter().append("line")
                            .attr("stroke-width",1)
                            .attr("stroke","rgba(50,50,0.2)");

          var nodeElement = svg.append("g")
                              .attr("class","nodes")
                              .selectAll("circle")
                              .data(graph.nodes)
                              .enter()
                              .append("circle")
                              .attr("r",30)
                              .attr("fill",getNodeColor)
                              .on('click',selectNode)

          var labelElement = svg.append("g")
              .attr("class","labels")
              .selectAll("text")
              .data(graph.nodes)
              .enter().append("text")
              .text(function(d) {
                return d.codice;
               })
               
          simulation
              .nodes(graph.nodes)
              .on("tick",ticked);

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

          function ticked() {
            linkElement
                .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; });

            nodeElement
                .attr("transform",function(d) {
                  return "translate(" + d.x + "," + d.y + ")";
                });
            labelElement
                .attr("x",function(d) { return d.x; })
                .attr("y",function(d) { return d.y; });
          }
    }); 

这段代码有什么问题？ 如果我禁用所有链接和标签，也会发生这种情况，节点会转到角落，请帮帮我！！！