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

Question

我正在尝试在美国地图上的两个 lat/long 点之间画一条线。我有圆圈表示起点和终点，但是当我尝试画线时什么也没有出现。没有错误被抛出。

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

  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");

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

希望有人能将我的代码指向正确的方向。我希望我很接近，因为没有错误被抛出。或者，也许我正在采取一种可怕的方法来在点之间画线，在这种情况下，有人会在我陷入困境之前告诉我。这是我的代码的工作 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 元素。

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

Drawing line between two projected points on map - no line showing - D3.js

javascript

d3.js

topojson