泡沫图使用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

回答

相关问题