Question

我根据具体条件创建了一个最多包含4个图表的网页。一切看起来都很棒。现在，客户希望气泡大小比率在4个图表中保持一致（即，每个图表中的2000个值用相同大小的气泡表示。）

是否可以配置bubble.nodes()生成器来执行此任务？

我知道我可以提供一个radius（）计算器，但我没有数学背景来计算给定数据集的最佳半径。

我正在使用包布局。经过一夜安眠之后，我想我想出了一个可行的解决方案。在为每个图表生成布局后，我可以找到每个图表中最大气泡的半径与值的比率，并将转换scale()应用于其他SVG以使比率相同（或足够接近）。 / p>

Answer 1

您可以尝试使用带有固定的手动设置输入域和输出范围的 d3.scale.linear（），将您的任意数据映射到一致的，可预测的值。

示例：

function getSize(d){ return d.size; }

var params = [
        this.aggregatedDataFromAllCharts_beforePacking, 
        getSize
], dataScale = d3.scale.linear()
        .domain([d3.min.apply(window, params), d3.max.apply(window, params)])
        .range([0, 1000]);

对于包的大小（根圈），您可能必须使用第二个刻度，它将每个数据集的聚合值映射到根圆的具体svg圆半径。有点像：

var aggregatedSizes = [];
// for all datasets
aggregatedSizes.push(d3.sum(dataset, getSize));
var packSizeScale = d3.scale.linear()
        .domain(Math.min(aggregatedSizes), Math.max(aggregatedSizes))
        .range(this.minCircleRadius, this.maxCircleRadius );

...其中min-和maxCircleRadius是您想要显示的最小和最大圆圈尺寸。

// for each of your data sets
var packedCircles = d3.layout.pack().nodes(dataset).value(function(d) { 
        return dataScale(d.size);
}).size([packSizeScale(d3.sum(dataset, getSize) *2)]);

还有一个不错的tutorial on D3 scales by Scott Murray

Answer 2

在我看来，由于您正在可视化气泡图及其半径（半径为复数？），因此应使用d3.scaleSqrt而不是d3.scaleLinear（以前的版本为d3.scale.linear()）。推理很简单：半径为10的圆不是半径为5的圆的两倍，因为圆的面积等于πr^ 2。

正如@craPkit所指出的那样，当使多个图表上的气泡大小一致时，需要在多个图表上的所有数据集的最小值和最大值的变量。在最常见的示例中，比较国家/地区的人口时，maximalValue将是数据集中人口最多的县的人口，minimalValue将是人口最少的县的人口，即使这两个国家都不出现在特定图表中。

第二步，必须将maximalValue和minimalValue传递到图表，并将它们用作域来为给定圆的值设置半径。看起来可能像这样：

let someFixedMaximalRadiusSize = 50;

someSelectedSVGElement.append('circle')
                      .attr('r', d => {
                        d3.scaleSqrt()
                        .domain([minimalValue < 0 ? minimalValue : 0,
                                 maximalValue])
                        .range([0, someFixedMaximalRadiusSize])(d.value)});

其中someSelectedSVGElement表示某些选择，例如使用d3.select()创建的选择。希望这个答案能对某人有所帮助。

我可以在D3气泡图中强制气泡大小比例吗？

2 个答案: