javascript - d3.svg.lineを使用してGeoJSONLIneStringデータからSVGポリラインを生成する際のエラー

Question

ここにあるd3.jsAPIドキュメントの提案に従って、私は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);

ポリゴンをうまく生成できます...ポリラインを生成しようとすると問題が発生します。助言がありますか？！