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元素。

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

1 个答案: