文章/答案/技术大牛

发布

社区首页 >问答首页 >用d3.geo.mercator绘制气泡图

问用d3.geo.mercator绘制气泡图
EN

Stack Overflow用户

提问于 2012-09-28 10:08:32

回答 1查看 1.6K关注 0票数 1

我是一个完全的D3.js n00b，所以我很抱歉，如果这有一个超级简单的解决方案，我完全错过了。总之，我正试图在世界地图上创建一个气泡图。它将类似于符号地图，但使用d3.geo.mercator而不是d3.geo.albersUsa。我正在使用world-countries.json文件，并创建了我自己的世界国家-centroids.json文件。有什么想法吗？下面是代码：

<!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>

javascript

map

d3.js

geo

bubble-chart

回答 1

Stack Overflow用户

发布于 2012-09-29 14:57:45

您需要在SVG元素上设置width和height属性才能使其可见。不幸的是，这些属性不能通过样式属性来设置，因为除了SVG元素的显示大小之外，它们还定义了SVG的坐标系统。

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

如果您想重新分配SVG元素(也就是说，显示它的大小与它的本机大小不同)，那么除了属性之外，您还可以使用样式属性，但是您仍然需要设置属性。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12637937

复制

相似问题

问用d3.geo.mercator绘制气泡图
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用d3.geo.mercator绘制气泡图EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用d3.geo.mercator绘制气泡图
EN