未捕獲的TypeError：無法讀取未定義的屬性“位置”（D3.JS）

Question

當我嘗試檢索JSON數據並將其制成折線圖時，會彈出此錯誤。

未捕獲的TypeError：無法讀取未定義的屬性“ position”

這是我的JS ：

d3.json("../js/sample2.json", function(data) {
    var canvas = d3.select("body").append("svg")
            .attr("width", 500)
            .attr("height", 500);

    var i = 0;
    var group = canvas.append("g")
            .attr("transform", "translate(100,100");


    var line = d3.svg.line()
            .x(function(d, i) {
                console.log("x" + d[0].position[i]);
                return d[0].position[i];
            })
            .y(function(d, i) {
                console.log("y" + d[1].position[i]);
                return d[1].position[i];
            });

    group.selectAll("path")
            .data([data]).enter()
            .append("path")
            .attr("d", line)
            .attr("fill", "none")
            .attr("stroke", "red")
            .attr("stroke-width", 5);
});

這是我的JSON：

[{"name": "x", "position":[40,60,80,100] },
 {"name": "y", "position":[70,190,220,160]}
]

我的小提琴

有人可以幫我這個忙嗎？

我希望從JSON文件檢索的數據中顯示行。

Answer 1

找到了解決方案：

d3.json("../js/sample2.json", function(data) {

    var canvas = d3.select("body").append("svg")
            .attr("width", 500)
            .attr("height", 500);
    console.log(data);

    var group = canvas.append("g")
            .attr("transform", "translate(100,100");


    var line = d3.svg.line()
            .x(function(d, i) {
//                console.log(data[0].position[i]);
                return data[0].position[i];
            })
            .y(function(d, i) {
//                console.log(data[1].position[i]);
                return data[1].position[i];
            });


    group.selectAll("path")
            .data([data]).enter()
            .append("path")
            .attr("d", line(data[0].position))
            .attr("fill", "none")
            .attr("stroke", "red")
            .attr("stroke-width", 5);
});

 Had to provide .attr("d", line(data[0].position))