Javascript 气泡图上文本的强制模拟不起作用

我有一个脚本，我在其中画圆圈，然后在上面附加文字。我想使用力模拟，这样不同圆圈的文本就不会重叠

我目前面临的问题如下图所示：（左侧的两个红色圆圈有重叠文本）

我在脚本中对文本使用了强制模拟，但什么也没发生。我没有得到任何错误，但仍然是文本重叠。我试过许多解决办法，但似乎都不管用

以下是我的脚本：

 function graph(data){
    //var margin = {top: 30, right: 20, bottom: 30, left: 50}

    var margin = 40,
    width = 600,
    height = 400;

    //   var force = d3.layout.force()
        // .nodes(datas)
        // .size([width, height]);

    simulation = d3.forceSimulation()
        .force("x", d3.forceX())
        .force("y", d3.forceY())
        .force("collide", d3.forceCollide(20)); 

    var xscale = d3.scaleLinear()
        .domain([0, d3.max(data, function (d) {
            return +d.student_percentile;
        })])
        .nice() 
        .range([0, width]);

    var yscale = d3.scaleLinear()
            .domain([0, d3.max(data, function (d) {
                return +d.rank;
            })])
            .nice()
            .range([height, 0]);

    var xAxis = d3.axisBottom().scale(xscale).tickFormat(function(d) {
        return d > 100 ? "Not Available" : d
    });

    var yAxis = d3.axisLeft().scale(yscale);

    var svg = d3.select('.chart')
        .classed("svg-container", true)
        .append('svg')
        .attr('class', 'chart')
        .attr("viewBox", "0 0 680 490")
        .attr("preserveAspectRatio", "xMinYMin meet")
        .classed("svg-content-responsive", true)
        .append("g")
        .attr("transform", "translate(" + margin + "," + margin + ")");

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    var color = d3.scaleOrdinal(d3.schemeCategory10);

    var local = d3.local();
    circles = svg.selectAll(null)
          .data(data)
          .enter()
          .append("circle")
          .attr("cx", width / 2)
          .attr("cy", height / 2)
          .attr("opacity", 0.3)
          .attr("r", 20)
          .style("fill", function(d){
            if(+d.admit_probability <= 40){
                return "red";
            }
            else if(+d.admit_probability > 40 && +d.admit_probability <= 75){
                return "yellow";
            }
            else{
                return "green";
            }
          })
          .attr("cx", function(d) {
            return xscale(+d.student_percentile);
          })
          .attr("cy", function(d) {
            return yscale(+d.rank);
          })
          .on('mouseover', function(d, i) {
            local.set(this, d3.select(this).style("fill"));
            d3.select(this)
              .transition()
              .duration(1000)
              .ease(d3.easeBounce)
              .attr("r", 32)
              .style("cursor", "pointer")
              .attr("text-anchor", "middle");
              var d = this.__data__;
              show_details(d);
            }
           )
          .on('mouseout', function(d, i) {
            d3.select(this).style("fill", local.get(this));
            d3.select(this).transition()
              .style("opacity", 0.3)
              .attr("r", 20)
              .style("cursor", "default")
            .transition()
            .duration(1000)
            .ease(d3.easeBounce);
            remove_details();
          });

    texts = svg.selectAll(null)
      .data(data)
      .enter()
      .append('text')
      .attr("text-anchor", "middle")
      .text(function(d) {
        return d.abbreviation;
      })
      .attr("pointer-events", "none")
      .attr("font-family", "sans-serif")
      .attr("font-size", "12px")
      .attr("fill", "black");

  simulation.nodes(data).on("tick", function(){
        texts.attr("x", function(d) {
             return xscale(+d.student_percentile);
           })
             .attr("y", function(d) {
             return yscale(+d.rank);
           });
    });


  //        force.on("tick", function() {

  //   texts.attr("x", function(d) { return +d.student_percentile; })
  //       .attr("y", function(d) { return +d.rank; });

  // });


    svg.append("text")
        .attr("transform", "translate(" + (width / 2) + " ," + (height + margin) + ")")
        .style("text-anchor", "middle")
        .text("Percentile");

    svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - margin)
        .attr("x",0 - (height / 2))
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .text("Rank");

    $('circle').tipsy({ 
        gravity: 'w', 
        html: true, 
        title: function() {
            var d = this.__data__;
            return d.name + '<br/> Rank: ' + d.rank + '<br/> Admit Probaility: ' + d.admit_probability + '%'; 
        }
    });
}

---

这也不起作用。

如果不查看您的数据或最少的运行代码，很难提供有效的答案。但有些错误是显而易见的，这是一个普遍的解决方案：

首先，您必须在

forceY

和

forceX

函数中指定文本的位置：

simulation = d3.forceSimulation()
    .force("x", d3.forceX(function(d) {
        return xscale(+d.student_percentile);
    }))
    .force("y", d3.forceY(function(d) {
        return yscale(+d.rank);
    }))
    .force("collide", d3.forceCollide(20)); 

然后，在

tick

函数中，您只需使用模拟创建的

x

和

y

属性：

simulation.nodes(data).on("tick", function() {
    texts.attr("x", function(d) {
            return d.x;
        })
        .attr("y", function(d) {
            return d.y;
        });
});

---

谢谢你的解决方案。您提供的内容在某种程度上解决了这个问题，但是这些值没有以这种方式正确缩放。这是我的脚本的链接：许多气泡甚至超过了X=100，值为X，比如说92，而X=100的气泡从侧面被切掉，X=100的气泡在100之前。基本上，我觉得缩放有点问题。而且，一些文本仍然重叠。我已经更新了小提琴。对给您带来的不便表示歉意。我的实际图表中的气泡，从最右边的角切下。检查图表时，我得到cx=“630.079176853747”和cy=“48.48043546247491”。因此，圆被切掉并且不可见。我甚至尝试过做圆。attr（“cx”，函数（d）{return d.x=Math.max（radius，Math.min（width-radius，d.x））；}；正如在这个链接中提到的：仍然不起作用：（基本上，当相同X轴值的值增加时，圆被减少。就像在这把小提琴中：我又增加了两个元素H和I，它们的X轴值与G的X轴值相同，所以D元素从侧面被减少！我想保持这些有界

simulation.nodes(data).on("tick", function() {
    texts.attr("x", function(d) {
            return d.x;
        })
        .attr("y", function(d) {
            return d.y;
        });
});