在地图上的两个投影点之间画线 - 没有线显示 - D3.js

Question

我正在尝试在美国地图上的两个纬度/经度点之间画一条线。我有圆圈指示起点和终点，但是当我尝试画线时，什么都没有出现。没有抛出任何错误。

我可以通过以下方式在这些点之间手动画一条线：

  svg.selectAll("line")
      .data(data)
      .enter()
      .append("line")
      .attr("x1", projection(data[0])[0])
      .attr("y1", projection(data[0])[1])
      .attr("x2", projection(data[1])[0])
      .attr("y2", projection(data[1])[1])
      .attr("stroke-width", 1)
      .attr("stroke", "black");

但这不是一种可持续的方法，因为我的数据集将包含数千个纬度/经度对。

希望有人可以将我的代码指向正确的方向。我希望我很接近，因为没有抛出错误。或者，也许我正在采取一种可怕的方法在点之间画线，在这种情况下，在我离兔子洞太远之前有人让我知道。这是我的代码的有效Plunker。

提前致谢。

Answer 1

Plunker：http://plnkr.co/edit/ooLkR8iec5NKx0Ns1zcD?p=preview

您似乎了解基于您创建的圈子的数据连接

svg.selectAll("circle")
    .data(points).enter()
    .append("circle")
    .attr("cx", function (d) {return projection(d)[0]; })
    .attr("cy", function (d) { return projection(d)[1]; })

你没有理由不能对线条做同样的事情。

svg.selectAll("line")
   .data(data)
   .enter()
   .append("line")
   .attr("x1", d=>projection(d[0])[0])
   .attr("y1", d=>projection(d[0])[1])
   .attr("x2", d=>projection(d[1])[0])
   .attr("y2", d=>projection(d[1])[1])

注意我对初始数据结构做了什么，以及我如何修改它以使用圆与线。

顺便说一下，d 属性仅适用于 path 元素。