嵌套JSON：属性长度未定义 [英] Nested JSON: property length of undefined

问题描述

我想在D3JS中使用JSON的嵌套数组，并且无法弄清楚为什么在这个世界上，我得到一个属性长度未定义的错误行：

I'm trying to work with a nested array with a JSON in D3JS and can't figure out why in the world I'm getting a "property length undefined" error at the line which reads:

.attr("d", function(d) { return line(d.points); }).

以下是JSON：

[
{
    "aspectRatio": 1.247386759581881,
    "closed": 1,
    "xyData": [
        {
            "x0": 0.53078594712060867,
            "x1": 0.95454545454545459,
            "x2": 0.95454545454545459,
            "x3": 0.53078594712060867,
            "x4": 0.53078594712060867,
            "y0": 0.52936622215603868,
            "y1": 0.52936622215603868,
            "y2": 0.13179275296659432,
            "y3": 0.13179275296659432,
            "y4": 0.52936622215603868
        }
    ]
},
{
    "aspectRatio": 1.247386759581881,
    "closed": 1,
    "xyData": [
        {
            "x0": 0.045454545454545435,
            "x1": 0.41126403477001078,
            "x2": 0.41126403477001078,
            "x3": 0.045454545454545435,
            "x4": 0.045454545454545435,
            "y0": 0.86820724703340568,
            "y1": 0.86820724703340568,
            "y2": 0.44804437618547044,
            "y3": 0.44804437618547044,
            "y4": 0.86820724703340568
        }
    ]
}
]

这里是代码：

function loadEss(filename,svgName,mainWidth){
var svgName;
d3.json(filename, function(error, data) {
    data.forEach(function(kv){
        kv.xyData.forEach(function(d) {
            d.points = [];
            aspect=1.5;
            for (var i = 0; d["x"+i] !== "" && (typeof d["x"+i] !== 'undefined'); i++) {
                d.points.push([mainWidth*d["x"+i], mainWidth/aspect*(d["y"+i])]);
            }
            console.log(d.points);
        });
    });

    var margin = {top: 0, right: 0, bottom: 0, left: 0},    
        width = mainWidth - margin.left - margin.right,             
        height = mainWidth/aspect - margin.top - margin.bottom; 

    svgName= d3.select("body")                                  
        .append("svg")                                      
            .attr("width", width + margin.left + margin.right)  
            .attr("height", height + margin.top + margin.bottom)
        .append("g")                                            
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


    var line = 
    d3.svg.line() 
    .interpolate("linear-closed")
    ;

    svgName.selectAll("path")
        .data(data)
        .enter()
        .append("path")
        ;

    svgName.selectAll("path")
        .attr("d", function(d) { return line(d.points); })  
        .attr("stroke-linecap","round")
        .attr("stroke-linejoin","round")
        ;
});

};

此工作基于以前的两个主题：嵌套JSON数组和D3JS 和 d3JS：从CSV中绘制线段

This work is based off of two previous topics: Nested JSON array and D3JS and d3JS: Drawing Line Segments from CSV

任何帮助都将非常感激。

Any help would be much appreciated.

推荐答案

以下是 jsfiddle

你正在构建的点数组存储在错误的位置，因此，当你通过 d.points 时，它到 line（）。而不是 d.points ，您需要 kv.points ：

That array of points that you're building is getting stored in the wrong place, so further below d.points is null when you pass it to line(). Instead of d.points you need kv.points:

    kv.xyData.forEach(function(d) {
        kv.points = [];
        aspect=1.5;
        for (var i = 0; d["x"+i] !== "" && (typeof d["x"+i] !== 'undefined'); i++) {
            kv.points.push([mainWidth*d["x"+i], mainWidth/aspect*(d["y"+i])]);
        }
        console.log(kv.points);
    });

这篇关于嵌套JSON：属性长度未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！