有沒有辦法從CSV中獲取資料，其中半徑是從json檔案形成的，以便可以根據單擊按鈕使用CSV資料調整Bubble的大小？

很明顯，最初的意圖是讓資料作為資料饋送的一部分在那個時候可用，也很明顯，沒有做任何事情來合并這兩個資料集，所以現在讓我們這樣做。

在這種情況下，我的偏好是使用forEach迭代和修改每個條目以包含來自csv檔案countries的整個匹配記錄。您可以使用，但在這種情況下，我們已經將大量資料加載到記憶體中，我們不需要保留國家 JSON 的未更改版本以及可能產生的新輸出。mapmap

我建議將 CSV 中的資料注入國家/地區陣列的另一個原因是，當我們需要訪問資料時，我們可以避免查找開銷。將csv資料和國家/地區資料排列到相同長度的陣列中并進行排序，以便相同的索引與每個檔案中的相同國家/地區相關聯，與注入資料產生相同的開銷，并使其更具確定性。支持一個陣列比另一個陣列具有更多值的場景也更容易。

我們只需要知道用于標識每個檔案中唯一記錄的屬性映射。我們可以看到csv檔案使用的是 2 個字母的國家/地區代碼：

我選擇了兩對澳大利亞、奧地利和印度、印度尼西亞進行比較，因為它們涵蓋了常見的匹配問題，大多數國家都有 2 個字母的郵政編碼，人們通常會先選擇這個，但是印度的郵政編碼是 3 個字母，印度尼西亞的是 4，Austria 有 1。我發現這個資料集特別有趣，因為名稱術語在字典上非常接近，但它們的唯一代碼有多么不同，所以我總是先檢查這些特定案例，然后再對整個資料集進行測驗或證明。

json檔案中的feature property metadata有很多資訊，重要的是它也有ISO_A2值，就是ISO標準的2字母國家代碼。

有很多不同的方法可以做到這一點，我只是去find匹配的記錄并將其填充到一個名為使用詳細方法的新屬性csv中，以便于理解：

// Convert the TopoJSON to GeoJSON
countries = {
  const geo = topojson.feature(map_layer, map_layer.objects.countries);
  geo.features.forEach(feature => {
    if(feature.geometry) {
      feature.centroid = centroid(feature);
    }
    let code = feature.properties.ISO_A2;
    let cData = country_data.find(x => x.CountryCode === code);
    feature.properties.csv = cData ?? {
  areasqkm: "",
  population: "",
  airports: "",
  gdpgrowthrate: "",
  inflationrate: "",
  unemploymentrate: "",
  popnbelowpoverty: "",
  medianage: ""
};
    return feature;
  });
  return geo;
}

現在資料可用，包括一個空記錄以簡化以后的錯誤處理。讓我們首先將其添加到工具提示內容中，以驗證它是否有效，我將轉儲所有擴展資料，以便我們可以探索不同的值：

<div>
  <h3>${hover.NAME}</h3>
  <div style="margin: 10px">
    <h4>CountryCode : ${hover.ISO_A2}  </h4> 
    <h4> ContinentCode : ${hover.CONTINENT}  </h>
    <h4>${parameter } : ${d3.format(",")(hover.csv[p])}</h4>
    <hr style="padding:0px"/>
    <smaller>
     Area Sqkm: ${d3.format(",")(hover.csv['areasqkm'])}<br/>
     Population: ${d3.format(",")(hover.csv['population'])}<br/>
     Airports: ${hover.csv['airports']}<br/>
     GDP Growth Rate: ${d3.format(",")(hover.csv['gdpgrowthrate'])}<br/>
     Inflation Rate: ${d3.format(",")(hover.csv['inflationrate'])}<br/>
     Unemployment Rate: ${d3.format(",")(hover.csv['unemploymentrate'])}<br/>
     Pop. Below Poverty: ${d3.format(",")(hover.csv['popnbelowpoverty'])}<br/>
     Median Age: ${hover.csv['medianage']}<br/>
    <smaller>
  </div>
</div>

現在您只需將這些屬性映射路徑應用到您的氣泡邏輯，我實際上將把該邏輯留在這里，主要問題是如何使資料可用，使用直接值呈現比例存在實用性問題形狀。很快你就會得到一些小到無法點擊或看到它們的物品，其他形狀會有如此大的差異，以至于功能forceCollide()只會弄得一團糟……看看這張氣泡圖中津巴布韋的通貨膨脹率：

將值映射到特定大小的域通常更實用，1-5 的比例通常就足夠了，但您可以轉到 10，其中 1 是地圖上最小的，10 是最大的，然后將資料范圍修剪為標準偏差，使得低于所有的例外值得到 1，高于所有的離群值得到相同的最大值。

技術和推理遠遠超出了這個討論空間。

uj5u.com熱心網友回復：

上面來自Chris的示例運行良好，是我提出的問題的一個很好的解決方案，并且是一步一步的好方法。我要感謝您的出色回答以及您為消除我的脆弱性和困惑所投入的時間。

但是，我也嘗試快速解決問題，并最終從我的 (.CSV) 檔案中創建了我自己的 (.geojson) 資料，這也有效，但并不比上述解決方案更好。

現在，由于我需要使用世界上幾乎所有國家/地區的許多引數，例如“能源消耗、生產、電力生產和消耗、黃金儲備、白銀儲備......以及所有經濟資料”，因此創建 (.csv) 檔案對于所有這些資料都不是一個好的解決方案（是嗎？）并且很耗時。

因此，我想使用 OWID DATA來獲取創建大型可視化所需的所有資料集。我做了一些研究，發現最簡單的方法是“fetch”方法，我嘗試實作但沒有成功。

如果有人能指出我正確的方向，那將很有幫助。如果有人能告訴我如何根據 OWID 資料庫設定我的引數名稱并根據按鈕單擊獲取資料，就像當前從我的 JSON 檔案中一樣，那么氣泡半徑將在每次按鈕單擊和氣泡時改變僅在滑鼠懸停時顯示所選引數資訊。

這是我用（.geojson 資料）做的筆記本：Bubble Cluster。

Ps：只有在引數選擇后才會出現氣泡:)

標籤：javascript 数组 d3.js 气泡图

上一篇：如何在D3.js中將帶有模式的圖表保存/匯出到.svg檔案？

下一篇：Java學習-第一部分-第二階段-專案實戰：坦克大戰【3】