Question

我在这个小提琴上给出了一个d3脚本：https://jsfiddle.net/ngfoha56/8/

我所面临的问题是，随着具有相同或相似X轴值的气泡数量增加，气泡超过100（X轴X轴），甚至从侧面切割或变得无界限。与给定示例中一样，G，H，I和J都具有相同的X和Y值，但是出现在X和Y轴的不同位置，并且＆＃39; I＆＃39;从侧面切割。我希望保持气泡与X轴和Y轴一致并保持它们有界。

我该怎么做？

我甚至尝试过做

 circles.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
 .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });

如此链接所述：https://bl.ocks.org/mbostock/1129492

保持气泡在所提及的高度和宽度范围内但不起作用。

Answer 1

问题是大多数点接近100，所以圆的中心将接近100，因此圆圈将会出现。

一种方法可能是，给出90％的阈值，这意味着90％以外的点将被制作90％的值，因此显示它将显示在其当前值的90％，因此pont将不会出现走出规模。

    var percent =0.90;//changeit as per your conveninece
    simulation = d3.forceSimulation()
    .force("x", d3.forceX(function(d) {
    var k = parseInt((xscale(+d.student_percentile)/width)*100);
    if (k > percent*100){//if less than percent
        return xscale(+d.student_percentile * percent)//reduce the percentile
    }
        return xscale(+d.student_percentile);
    }))
    .force("y", d3.forceY(function(d) {
    var k = parseInt((yscale(+d.rank)/height)*100);
    if (k > percent*100){
        return yscale(+d.rank * percent)
    }

        return yscale(+d.rank);
    }))
    .force("collide", d3.forceCollide(20));

工作代码here

强制模拟气泡和文本无界限且与XY轴不一致

1 个答案: