Question

根据d3.js API文档here中的建议，我正在尝试使用d3.svg.line从描述GeoJSON格式的LineString的坐标数据生成SVG折线。但是，当我这样做时，我在浏览器的JavaScript控制台中收到错误，如下所示：

Error: Problem parsing d="[object SVGLineElement]"

GeoJSON数据看起来像这样。

test.json

{"type": "FeatureCollection", "features": [
  { "type": "Feature", "properties": { "id": "0" },
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [ -122.1219348702,42.3351232329 ],
        [ -122.05927795103516,43.04825098762893 ],
        [ -117.5980213906,43.0866974143 ]
      ]
    }
  }
] }

JavaScript看起来像这样，它遵循文档中的示例，而不是在上面标题为“路径数据生成器”的部分中链接的文档。

app.js

var projection = d3.geo.albers()
  .scale(2000)
  .center([-20,47]);

var path = d3.geo.path()
  .projection(projection);

var line = d3.svg.line()
  .x(function(d) { return projection(d)[0]; })
  .y(function(d) { return projection(d)[1]; })
  .interpolate("linear");

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

var g = svg.append("g");

d3.json("test.json", function(json) {
  g.selectAll("path")
  .data(json.features)
  .enter().append("path")
  .attr("d", line);

我能够很好地生成多边形...我在尝试生成折线时遇到了麻烦。有什么建议吗？！

使用d3.svg.line从GeoJSON LIneString数据生成SVG折线时出错

0 个答案: