使用点/对象数组绘制SVG路径

Question

无论出于何种原因，the example in this link here对我不起作用，这令人沮丧。

I have a codepen here我试图将MLB体育场作为SVG绘制，但是我正在努力使用上面链接中的代码创建路径对象。什么不起作用如下：

 //The data for our line
 var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
                  { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
                  { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

 //This is the accessor function we talked about above
 var lineFunction = d3.svg.line()
                          .x(function(d) { return d.x; })
                          .y(function(d) { return d.y; })
                         .interpolate("linear");

//The SVG Container
var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 200)
                                    .attr("height", 200);

//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
                            .attr("d", lineFunction(lineData))
                            .attr("stroke", "blue")
                            .attr("stroke-width", 2)
                            .attr("fill", "none");

我的codepen中的代码稍微修改后附加到我已创建的svg，而不是示例中初始化的svg。我得到一个看似明显的错误无法读取未定义的属性'line'，但我不知道为什么我得到这个。我把d3包含在codepen中。

这里的任何帮助表示赞赏!!感谢。