D3.js：如何合併2個數據集以創建地圖並在on.mouseover上顯示值？

我想在D3.js的地圖上組合兩個數據集。D3.js：如何合併2個數據集以創建地圖並在on.mouseover上顯示值？

例如：

第一數據集：在上傳.json空間數據。

第2集：數據的地區爲.csv

- >當你將鼠標懸停在地圖上的提示應該表現出句子從第2集的一些數據。

我可以製作地圖並在.json文件中顯示工具提示，但是如何插入第二個數據集？

在我的函數中創建地圖的新函數？
我必須採取一種全新的方式嗎？
在使用d3.js之前，我應該將.json文件與我的第二個數據集合並嗎？

我很欣賞任何想法！ :)

來源

2013-10-11 kbrunner

使用包含兩者的單個數據集幾乎肯定會更容易。 –

我需要你想要做的一個例子 – Jhonathan

你可以在json回調函數裏面加載csv回調函數，這樣你就可以做你想要的 – tomtomtom

所以，我想你在問什麼是如何從json獲取空間數據，並加入一些單獨加載的csv數據？

我做了一個地區分佈圖我畫類似的東西，基本上我剛剛創建地圖拓撲元素ID數據對象，然後我做了使用拓撲元素的ID來獲得查找任何我想做的與實際的關聯繪製的地圖元素（我正在使用這種方法來設置基於fips國家代碼的choropleth的顏色）。

所以基本上，繪製地圖，以便您有一個id與您想要懸停的每個地圖元素相關聯。然後，在您的mouseover/mouseout處理程序中，您將使用該id來查找要在工具提示中顯示的數據，並使用svg標題元素或tipsy或手動繪製svg文本元素或其他任何內容來顯示工具提示。

這裏的繪製工具提示幾個有用的參考資料： https://gist.github.com/biovisualize/1016860 http://jsfiddle.net/reblace/6FkBd/2/

從小提琴：

function mouseover(d) { 
    d3.select(this).append("text") 
     .attr("class", "hover") 
     .attr('transform', function(d){ 
      return 'translate(5, -10)'; 
     }) 
     .text(d.name + ": " + d.id); 
} 

// Toggle children on click. 
function mouseout(d) { 
    d3.select(this).select("text.hover").remove(); 
}

基本上，它是附加一個SVG的文本元素，並從元件的位置被抵消它盤旋。

下面是我如何在外部地圖查找數據的樣本：

// Update the bound data 
data.svg.selectAll("g.map path").transition().duration(750) 
    .style("fill", function(d) { 
     // Get the feature data from the mapData using the feature code 
     var val = mapData[d.properties.code]; 

     // Return the colorScale value for the state's value 
     return (val !== undefined)? data.settings.colorScale(val) : undefined; 
});

如果你的數據是靜態的，你可以加入到你的topojson文件（如果這是你使用的是什麼）。 https://github.com/mbostock/topojson/wiki/Command-Line-Reference

客戶端可以更改我的數據，所以我保持它分開，並在每次數據更改時重新繪製地圖，以便更新顏色。由於我的數據是topojson，因此我可以使用d.properties.code從地圖數據訪問特徵ID（因爲我已經使用topojson工具將代碼加入topojson文件中，我使用上面提到的topojson工具...但是您可以使用任何唯一的ID位於您擁有的空間數據文件中）。

來源

2013-10-11 17:00:11 reblace

D3.js：如何合併2個數據集以創建地圖並在on.mouseover上顯示值？

回答

相關問題