2
第五步：假设地理信息服务根目录名为“D3Map”，cd 到服务根目录 D3Map，见上图。
第六步：在命令行窗口，在 D3Map 目录下安装 topoJSON，topoJSON 中装有 D3（也可
以直接安装 D3），命令为 npm install topojson，见上图。
第七步：在命令行窗口，在服务根目录 D3Map 下，输入命令行 http-server，见上图，
Web 服务启动，本机地址 127.0.0.1，端 口 8080。退出服务，在命令行窗口输入 Ctrl+C 即可。
2 编写 D3 JavaScript 代码并准备数据
第一步：编写代码。以下代码来自 Malcolm Maclean 2013 年编写的《D3-Tips-and-Tricks》
最后一页（247 页）的一个示例“Map with zoom / pan and cities”,我在其中添加了两
句代码，实现手指移到 City 点上，屏幕左下角会显示 City 信息。代码保存文件名为
D3Map.html（如果作为服务根目录页面打开，保存文件名为 index.html）
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: white;
stroke-width: 0.25px;
fill: green;
}
</style>
<body>
<script src="d3/d3.min.js"></script>
<script src="topojson/build/topojson.min.js"></script><script>
var width = 960,
height = 500;
var projection = d3.geo.mercator()
.center([0, 5 ])
.scale(200)
.rotate([-180,0]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g");
// load and display the World
d3.json("json/world-110m2.json", function(error, topology) {
// load and display the cities
d3.csv("data/cities.csv", function(error, data) {
g.selectAll("circle")
.data(data)
