在D3地图上在经度和纬度点之间添加静态线 [英] Add Static Lines on D3 Map Between Latitude and Longitude Points
问题描述
我有一张D3世界地图，上面有我感兴趣的经纬度标记.
I have a D3 map of the world with markers on latitude and longitude points that I am interested in.
现在，我想绘制连接这些点的简单静态线.我该怎么办?
Now I would like to draw simple, static lines connecting these points. How do I do this?
这是我的带有标记的地图代码:
This is my code for the map with markers:
<!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
此代码产生如下内容:
现在，我想将标记与线连接起来.只是一条静态线，不需要进行动画处理或其他任何操作.结果应如下所示:
Now I want to connect the markers with lines. Just a static line, doesn't need to be animated or anything. The result should look like:
我为 d3.json()调用上方的行添加了一个新组:
I added a new group for the lines above the d3.json() call:
var lines = features.append("g");
然后在 d3.json()调用中，添加类似以下内容以创建线坐标数组:
Then inside the d3.json() call, I add something like this to create the array of line coordinates:
var theLines = [
{
type: "LineString",
coordinates: [
[ data[0].lon, data[0].lat ],
[ data[1].lon, data[1].lat ]
]
}
];
但是我不确定下一步该怎么做(或者我的方法是否正确)来真正添加连接标记的行.
But I'm not sure what to do next (or if my approach is correct) to actually add in the lines connecting the markers.
我想使用CSS设置标记和线条的颜色和大小.
I want to use CSS to style the color and size of the markers and lines.
更新:
我尝试更改圈子的代码以画一条线，但它不起作用:
I tried changing the code for the circles to draw a line instead but its not working:
根据 srbdev的答案，我将 lineString 更改为 line :
As per srbdev's answer, I changed lineString to 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" 值.
But I get the following result: x2 and y2 have "NaN" values in the console.
推荐答案
在进行编辑时，应将代码更改为:
On your edit, you should change your code to:
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", "yellow");
});
我将"lineString"更改为"line".有关可用SVG元素的列表，请参见此链接.
I changed "lineString" to "line". For a list of available SVG elements, see this link.
另一种解决方案，尽管不是Lars提到的D3方式，实际上是给每个圆分配一个ID，并按照以下步骤创建直线:
Another solution, though not really the D3 way as Lars mentioned, is to assign an ID to each of the circles and create your line as follow:
svg.append("line")
.attr("x1", d3.select("#circle1").attr("cx"))
.attr("y1", d3.select("#circle1").attr("cy"))
.attr("x2", d3.select("#circle2").attr("cx"))
.attr("y2", d3.select("#circle2").attr("cy"))
.style("stroke", "yellow");
希望这会有所帮助！
这篇关于在D3地图上在经度和纬度点之间添加静态线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
