1

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

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

GeoJSON 数据如下所示。

测试.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 看起来像这样，它遵循我在上面标题为“路径数据生成器”的部分中链接的文档中的示例。

应用程序.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);

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

4

0 回答 0