使圆圈不会超出D3的图表范围

Question

我正在制作一张现在看起来像这样的图表：

我使用d3比例和范围设置圆圈的大小和坐标，来自JSON数据。

一切正常，但我需要确保那些接近极值的圆圈不会与图表的两边重叠（如右上角的橙色圆圈和底部的蓝色圆圈），所以我想我需要玩范围和更改坐标，以防它们重叠或有更好的尝试方法吗？

Answer 1

绘制圆圈时，除x和y缩放功能外，我们还使用r缩放功能：

    var rScale = d3.scale.linear()
        .domain([0, maxR])
        .range([0, maxBubbleRadius]);

    var xScale = d3.scale.linear()
        .domain([minX, maxX])
        .range([0, chartWidth]);

    var yScale = d3.scale.linear()
        .domain([minY, maxY])
        .range([chartHeight, 0]);

其中maxR是数据集中最大的r值，而maxBubbleRadius是大的，当你绘制它时，你想要最大的圆圈。

使用x和y缩放功能可以很容易地计算每个圆的中心将被绘制的位置，然后我们可以添加（缩放的）r值以查看圆圈是否会溢出图表边界。通过下面的第一个图表，我们可以看到4个圆圈溢出。解决此问题的第一步是找出我们溢出的垂直和水平单位数，然后在重新计算xScale和{{1}之前增加最小和最大x和y值以将其考虑在内。 vars。如果我们再次绘制图表，边界将移出，但可能仍会有一些可见的溢出（取决于使用的实际值）;这是因为给定圆的半径是固定数量的像素，因此在图表上占用不同数量的x和y单位，从我们最初计算它溢出的数量开始。因此，我们需要采用迭代方法并继续应用上述逻辑，直到我们到达我们想要的位置。

下面的代码显示了我如何迭代地实现可接受的缩放因子，以便所有圆圈都可以绘制而不会溢出。请注意，我这样做了10次（如循环中所示） - 我发现这个数字适用于我目前为止所绘制的所有数据。 理想情况下，我应该计算一个delta（溢出量）并迭代直到它为零（这也需要在第一次迭代时超调，否则我们永远不会达到我们的解决方案！）

yScale

}