我可以在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氣泡圖中強制使用氣泡尺寸比例嗎？

回答

相關問題