【发布时间】：2015-07-17 10:39:12
【问题描述】：
我有一张 D3 世界地图，上面标有我感兴趣的经纬度点。
现在我想绘制连接这些点的简单静态线。我该怎么做？
这是我的带有标记的地图代码：
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 900,
height = 500;
// Create Projection
var projection = d3.geo.mercator()
// Generate paths based on projection
var path = d3.geo.path()
.projection(projection);
// Create SVG
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// Group for the map features
var features = svg.append("g")
.attr("class","features");
// Build map with markers
d3.json("countries.topojson",function(error,geodata) {
if (error) return console.log(error);
//Create a path for each map feature in the data
features.selectAll("path")
.data(topojson.feature(geodata, geodata.objects.subunits).features)
.enter()
.append("path")
.attr("d", path)
// Add markers for cities by their latitude and longitude.
d3.csv("cities.csv", function (error, data) {
features.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function (d) {
return projection([d.lon, d.lat])[0];
})
.attr("cy", function (d) {
return projection([d.lon, d.lat])[1];
})
.attr("r", 5)
.style("fill", "red");
});
});
</script>
cities.csv:
name,lat,lon
LA,34.05,-118.25
NY,40.7127,-74.006
这段代码产生如下内容：
现在我想用线条连接标记。只是一条静态线，不需要动画或任何东西。结果应如下所示：
我为d3.json() 调用上方的行添加了一个新组：
var lines = features.append("g");
然后在 d3.json() 调用中，我添加类似这样的内容来创建线坐标数组：
var theLines = [
{
type: "LineString",
coordinates: [
[ data[0].lon, data[0].lat ],
[ data[1].lon, data[1].lat ]
]
}
];
但我不确定下一步该做什么（或者我的方法是否正确）以实际添加连接标记的行。
我想使用 CSS 来设置标记和线条的颜色和大小。
更新：
我尝试更改圆圈的代码以画一条线，但它不起作用：
根据srbdev's 的回答，我将lineString 更改为line：
d3.csv("cities.csv", function (error, data) {
features.selectAll("line")
.data(data)
.enter()
.append("line")
.attr("x1", function (d) {
return projection([d.lon])[0];
})
.attr("y1", function (d) {
return projection([d.lat])[0];
})
.attr("x2", function (d) {
return projection([d.lon])[1];
})
.attr("y2", function (d) {
return projection([d.lat])[1];
})
.style("stroke", "red");
});
但我得到以下结果：x2 和 y2 在控制台中有 "NaN" 值。
【问题讨论】：
-
D3 方法是从您的
cities数据中为链接构建数据（例如，简单的带有开始和结束城市的 2 元素数组）并使用它来添加行。最简单的方法可能是使用line元素和直接从数据中获取的坐标，其方式与您目前为城市添加圆圈的方式类似。 -
谢谢拉斯。你能给我一个例子吗？我更新了我的问题，我尝试修改我的代码以绘制一条线而不是点。
-
那么您如何确定应该在哪些城市之间划线？
标签： javascript d3.js