我可以在D3气泡图中强制使用气泡尺寸比例吗？

我创建了一个网页，最多可以有4个图表，具体取决于具体的标准。一切都很美妙。现在客户希望气泡大小比率在4个图表中保持一致（即，每个图表中的值为2000表示为相同大小的气泡）。我可以在D3气泡图中强制使用气泡尺寸比例吗？

是否可以配置bubble.nodes()发电机来执行此操作任务？

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

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

来源

2014-04-01 user3486622

我假设你在谈论的包布局。有没有选择一致的大小，你必须自己计算半径。 –

您可以尝试使用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

来源

2014-04-02 09:23:13 craPkit

我可以在D3气泡图中强制使用气泡尺寸比例吗？

回答

相关问题