Question

在D3中，尤其是在投影y值时，我很难从纬度和经度绘制一条线。

我使用以下代码和示例json数组绘制线条。

var json_str = [
{
    "lng1": 53.587,
    "lat1": -2.159,
    "lng2": 53.587,
    "lat2": -2.159,
},
{
    "lng1": 53.587,
    "lat1": -2.159,
    "lng2": 53.587,
    "lat2": -2.157,
}
];

d3.select("#lines").selectAll("line")
.data(json_str)
.enter()
.append("line")
.attr("x1", function (d) { return projection([d.lat1])[0]; })
.attr("y1", function (d) { return projection([d.lng1])[0]; })
.attr("x2", function (d) { return projection([d.lat2])[0]; })
.attr("y2", function (d) { return projection([d.lng2])[0]; })
.style("stroke", "black")
.style("stroke-width", 5);

当我投影x值时，它带有正确的值并正确投影在我的地图上，但是当我投影Y时，使用相同的函数但在不同的字段上，它给了我疯狂的值，因此不是在我的SVG范围内绘制。大约在1299 ***。

我使用相同的函数来投影点数据的x和y值没问题。

d3.select("#points").selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", function (d) { return projection([d.y, d.x])[0] })
        .attr("cy", function (d) { return projection([d.y, d.x])[1] })

编辑：下面的标记答案使我接近，但投影仍然不正确。

我创建了一个Plunker来显示我的问题，该问题包含下面的Marks答案。本质上，“线” SVG绘制90度角，我无法理解为什么。

Answer 1

documentation指出（轰动我）：

投影（点）

返回代表给定点投影点的新数组[x，y]（通常以像素为单位）。 必须将点指定为以度为单位的两元素数组[经度，纬度]。如果指定的点没有定义的投影位置（例如，当点位于的剪切范围之外时）可以返回null。投影。

您正在return projection([d.lat1])[0];中传递单数经度/纬度值。这是行不通的。

我将其重构为：

var json_str = [
{
  "lng1": 53.587,
  "lat1": -2.159,
  "lng2": 53.587,
  "lat2": -2.159,
},
{
  "lng1": 53.587,
  "lat1": -2.159,
  "lng2": 53.587,
  "lat2": -2.157,
}
];

d3.select("#lines").selectAll("line")
  .data(json_str)
  .enter()
  .append("line")
  .each(function(d){
    d.p1 = projection([d.lng1, d.lat1]);
    d.p2 = projection([d.lng2, d.lat2]);
  })
  .attr("x1", function (d) { return d.p1[0]; })
  .attr("y1", function (d) { return d.p1[1]; })
  .attr("x2", function (d) { return d.p2[0]; })
  .attr("y2", function (d) { return d.p2[1]; })
  .style("stroke", "black")
  .style("stroke-width", 5);

D3.js投影y值时出现的问题

1 个答案: