泡沫圖使用d3.geo.mercator

我是一個總的D3.js n00b，所以我很抱歉，如果這最終有一個超級簡單的解決方案，我完全失蹤。無論如何，我正在試圖在世界地圖上創建一個氣泡圖。它將類似於Symbol Maps，但使用d3.geo.mercator而不是d3.geo.albersUsa。我使用world-countries.json文件並創建了我自己的world-country-centroids.json文件。有任何想法嗎？下面的代碼：泡沫圖使用d3.geo.mercator

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    <title>Countries of the World</title> 
    <script type="text/javascript" src="../../d3.v2.js"></script> 
    <style type="text/css"> 

svg { 
    width: 960px; 
    height: 500px; 
} 

#countries path, #country-centroids circle { 
    fill: #ccc; 
    stroke: #fff; 
    stroke-width: 1.5px; 
} 

#country-centroids circle { 
    fill: steelblue; 
    fill-opacity: .8; 
} 

    </style> 
    </head> 
    <body> 
    <script type="text/javascript"> 

// The radius scale for the centroids 
var r = d3.scale.sqrt() 
    .domain([0, 1e6]) 
    .range([0, 10]); 

// World Map Projection 
var xy = d3.geo.mercator(), 
    path = d3.geo.path().projection(xy); 


var svg = d3.select("body").append("svg"); 
svg.append("g").attr("id", "countries"); 
svg.append("g").attr("id", "country-centroids"); 

d3.json("../data/world-countries.json", function(collection) { 
    svg.select("#countries") 
    .selectAll("path") 
     .data(collection.features) 
    .enter().append("path") 
     .attr("d", d3.geo.path().projection(xy)); 
}); 

d3.json("../data/world-country-centroids.json", function(collection) { 
    svg.select("#country-centroids") 
    .selectAll("circle") 
     .data(collection.features 
     .sort(function(a, b) { return b.properties.population - a.properties.population; })) 
    .enter().append("circle") 
     .attr("transform", function(d) { return "translate(" + xy(d.geometry.coordinates) + ")"; }) 
     .attr("r", 0) 
    .transition() 
     .duration(1000) 
     .delay(function(d, i) { return i * 50; }) 
     .attr("r", function(d) { return r(d.properties.population); }); 
}); 

    </script> 
    </body> 
</html>

來源

2012-09-28 user1705882

你的問題是什麼？怎麼了？你有錯誤嗎？ – Eonasdan

什麼都沒有顯示！ – user1705882

您應該打開控制檯並檢查輸出的錯誤 –

您需要的SVG元素上設置width和height屬性，它是可見的。不幸的是，這些屬性不能通過樣式屬性設置，因爲它們除了顯示SVG元素的大小外，還定義了SVG的座標系。

var svg = d3.select("body").append("svg") 
    .attr("width", 960) 
    .attr("height", 500);

可以使用除了到屬性樣式屬性如果要重新調整SVG元素（即，以不同的尺寸比其本身尺寸顯示它），但你仍然需要設置屬性。

來源

2012-09-29 14:57:45 mbostock

泡沫圖使用d3.geo.mercator

回答

相關問題