初学 D3.js (二)世界地图之Map

好久没有写博客了,最近都在忙另外一个项目,D3.js的学习稍微放下了一段时间,现在闲下来了继续学D3.js。这篇文章中我们将用D3.js画世界地图。效果可以点这里,完整的代码和地图数据可以点这里

首先我们准备地图数据,这是我在网上找到的稍微做了修改,主要的修改是将某省合并到大陆,避免不必要的纠纷。 world-countries.json

我们用了默卡托投影后,南极洲太大了,所以我们先过滤南极洲,这里我们用到了 underscorejs。

var features = _.filter(data.features, function(value, key) {
  return value.properties.name != 'Antarctica';
});

让地图充盈整个屏幕。我们先获取默卡托投影的原始的尺寸,然后按比例缩放成全屏,为了在两侧留点空间,我们缩放的时候乘以 0.9

var projection = d3.geo.mercator();
var oldScala = projection.scale();
var oldTranslate = projection.translate();

xy = projection.scale(oldScala * (width / oldTranslate[0] / 2) * 0.9)
  .translate([width / 2, height / 2]);

path = d3.geo.path().projection(xy);

绘制地图。

svg.attr('width', width).attr('height', height);
svg.selectAll('path').data(features).enter().append('svg:path')
  .attr('d', path)
  .on('mouseover', function(data) {
    d3.select(this).attr('fill', 'rgba(2,2,139,0.61)');
  })
  .on('mouseout', function(data) {
    d3.select(this).attr('fill', 'rgba(128,124,139,0.61');
  })
  .attr('fill', 'rgba(128,124,139,0.61)')
  .attr('stroke', 'rgba(255,255,255,1)')
  .attr('stroke-width', 1);

在地图上绘制我们的位置。

var myLocation = xy([121.3997, 31.0456]);
svg.append('circle').attr('r', 15)
  .attr('fill', 'url(#tip)')
  .attr('transform', 'translate(' + myLocation[0] + ', ' + myLocation[1] + ')');

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注