0
我拥有世界上的D3地图上，我感兴趣的纬度和经度点标记。在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的方式是从你的城市数据中为这些链接构建数据（例如，只有2个元素的数组与起始和终止城市），并用它来添加行。最简单的方法可能是使用'line'元素，其坐标是直接从数据中获取的，您可以使用类似的方式为当前城市添加圆圈。 – 2014-11-06 09:39:26
谢谢拉尔斯。你能举个例子吗？我更新了我的问题，我尝试修改我的代码来绘制一条线而不是点。 – brno792 2014-11-07 00:16:48
那么你如何确定在哪些城市线路之间应该绘制？ – 2014-11-07 09:20:14