如何在D3.js TopoJSON地图中从几个坐标到另一个坐标获得一条线

Question

我正在使用D3.js和美国的TopoJSON地图。我已经生成了JSON文件，其中包含有关县，城市（表示为点）和其他一些内容的信息，但我无法让线路正常工作。

基于以下代码，我正在尝试做的是通过坐标将一个地图的两个点链接起来。前两个代表原始城市，而最后两个代表一个大学，这条线的理想目的地。

{ "type": "Feature", "id":5, "geometry": { "type": "LineString", "coordinates": [[ -83.150823, 42.239933 ], [ -83.738219, 42.277857 ]]}, "properties": { "OBJECTID": 5, "city": "Detroit", "college": "University of Michigan"}}

将此JSON移植到在SVG中绘制形状的.js脚本时，我使用以下代码。

  var lineFunction = d3.svg.line()
                        .x(function(d) { return d.x; })
                        .y(function(d) { return d.y; })
                        .interpolate("linear");

  svg.selectAll('.links')
  .data(lines.features)
  .enter().append('path')
  .attr("class", "link")
  .attr("d", function(d){

    var lineData = [ { "x": d.geometry.coordinates[0][0], "y": d.geometry.coordinates[0][1]},
                     { "x": d.geometry.coordinates[1][0], "y": d.geometry.coordinates[1][1]} ];

    return lineFunction(lineData);

  })
  .attr("stroke", "blue")
  .attr("stroke-width", function(d){
      return 2;
  })
  .attr("fill", "none")
  .attr('transform', function(d) {

    return "translate(" + projection([d.geometry.coordinates[0][0],d.geometry.coordinates[0][1]]) + ")"; })

相当简单。选择JSON中的每个“链接”，并构建一条附加到SVG的行。这个过程有效，但结果并不像我们预期的那样。为了简化发生的事情，下一张图片显示了在城市的JSON中使用不同坐标的结果，但对于大学来说总是[10,10]，这应该给我们一个充满线条的地图朝向同一点。而不是那样，我们得到某种“相对”线，从原点移动（我要说它甚至不应该在它应该的位置，甚至具有相同的圆圈坐标 - 它代表它）到a可能[10,10]本身。

所以我一直在尝试的东西，但是我无法使用相同的目的地坐标汇聚到一个点，更不用说我是否使用真实的坐标，带来了灾难性的结果。我错过了什么？也许对线条应用一些投影？那些没有开始的线应该定位（在圆圈所代表的城市上方）呢？

修改

我可以通过做一个小技巧让线条从它们应该开始的位置开始，这只不过是将X和Y点放在它们应该开始的圆（城市）所在的位置。

  .attr("x1", function(d){ return d3.selectAll(".city."+d.properties.city+"."+d.properties.state).attr("cx");})
  .attr("y1", function(d){ return d3.selectAll(".city."+d.properties.city+"."+d.properties.state).attr("cy");})

问题仍然存在于目的地点。我所谓的“大学”被制作为SVG矩形，没有给出位置X和Y，因为我使用了一个平移和投影函数，它从我那里获得X和Y只是传递它们的真实世界[lon，lat]坐标学院。有没有办法在SVG画布上获取矩形的X和Y，所以我可以应用类似于我对原点所做的操作（参见下面的代码，顺便说一下，它不起作用，显然是因为形状没有没有X和Y属性？？

  .attr("x2", function(d){ return d3.selectAll(".college."+d.properties.college).attr("x");})
  .attr("y2", function(d){ return d3.selectAll(".college."+d.properties.college).attr("y");})

提前感谢您的建议！