我可以在D3气泡图中强制使用气泡大小比率吗？
我已经创建了一个网页，根据特定的标准，最多可以有4个图表。一切看起来都很棒。现在客户希望气泡大小比在4个图表中保持一致(即，值2000在每个图表中用相同大小的气泡表示。)
是否可以配置bubble.nodes()生成器来执行此任务？
我知道我可以提供一个radius()计算器，但我没有计算给定数据集的最佳半径的数学背景。
我使用的是pack布局。睡了个好觉之后，我想我想出了一个可行的解决方案。在为每个图表生成布局后，我可以找到每个图表中最大气泡的半径与值的比率，并将转换scale()应用于其他SVG，以使比率相同(或足够接近)。
回答 2
Stack Overflow用户
发布于 2014-04-02 17:23:13
您可以尝试使用具有固定的手动设置的输入域和输出范围的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 );...where最小值-和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
Stack Overflow用户
发布于 2020-03-23 04:19:56
在我看来，既然你在可视化气泡图，它是半径(半径是复数吗？)推理很简单:半径为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()创建的选择。希望这个答案能对某些人有所帮助。
https://stackoverflow.com/questions/22795663
复制相似问题
腾讯云开发者
