Question

当我尝试检索 JSON数据并将其设为折线图时，会弹出此错误。

未捕获的TypeError：无法读取未定义的属性“位置”

这是我的 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]}
]

My fiddle

有人可以帮我解决这个问题吗？

我希望从 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))

未捕获的TypeError：无法读取undefined（D3.JS）的属性“position”

1 个答案: