javascript - 在 map 上的两个投影点之间绘制线 - 不显示线 - D3.js

Question

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

我可以通过编写以下内容在这些点之间手动绘制一条线:

  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

骗子: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 元素。