Question

正确输入数据，但在记录时显示为未定义：

data.mydata.forEach(function (kv) {
    var labelName = kv.label;
    var colorName = kv.color
    kv.values.forEach(function (d) {
        d.id = d.id;
        d.color = colorName;
        d.val = +d.val; 
        d.label = labelName;
    });
});

错误显示在此行：

{
    "mydata":[
        {
            "id":"line01",
            "color":"#de6868",
            "label":"internal",
            "values":[
                    {"week":"Week 1","val":37},
                    {"week":"Week 2","val":38},
                    {"week":"Week 3","val":33},
                    {"week":"Week 4","val":32},
                    {"week":"Week 5","val":40},
                    {"week":"Week 6","val":27},
                    {"week":"Week 7","val":30},
                    {"week":"Week 8","val":37},
                    {"week":"Week 9","val":42},
                    {"week":"Week 10","val":36},
                    {"week":"Week 11","val":35},
                    {"week":"Week 12","val":37},
                    {"week":"Week 13","val":33}
            ]
        },

JSON代码如下：

    d3.json('linedata.00.json', function(error, data){

            console.log(data)
            data.mydata.forEach(function (kv) {
                var labelName = kv.label;
                var colorName = kv.color
                kv.values.forEach(function (d) {
                    d.id = d.id;
                    d.color = colorName;
                    d.val = +d.val; 
                    d.label = labelName;
                });
            });
            color.domain(data.mydata.map(function (d) { return d.label; }));

            myColor = function(d){return d.color};

            var tip = d3.tip()
                .attr('class', 'd3-tip')
                .offset([-10, 0])
                .html(function(d) {
                    return "<span style='color:red'>" + d3.format("$,")(d.val) + "</span>";
                })

            svg.call(tip);

            var dataNest = d3.nest()
                .key(function(d) {return d.label;})
                .entries(data.mydata);

            function make_y_axis() {        // function for the y grid2 lines
                return d3.svg.axis()
                .scale(y)
                .orient("left")
                .ticks(5)
            }

            console.log(yAxis.ticks());

            var minY = d3.min(data.mydata, function (kv) { return d3.min(kv.values, function (d) { return d.val; }) });
            var maxY = d3.max(data.mydata, function (kv) { return d3.max(kv.values, function (d) {return    d.val; }) });
            var maxX = d3.max(data.mydata, function (kv){return d3.max(kv.values, function(d){ return d.week + 1;});});
            console.log(maxX);

            var padding = width/(data.mydata[0].values.length + 1)/2;
            x.domain(data.mydata[0].values.map(function (d) { return d.week; })).rangePoints([padding, width-padding]);
            y.domain([0,(1.2 * maxY)]);


            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end");


            svg.append("g")      // Draw the y grid2 lines
                .attr("class", "grid2")
                .call(make_y_axis()
                    .tickSize(-width, 0, 0)
                    .tickFormat("")
                );


            svg.selectAll(".grid2")
                .selectAll(".tick")
                    .append("rect")
                    .attr("width", width)
                    .attr("height", height / (yAxis.ticks()[0]-1) -3)
                    .attr("class", function(d, i) {
                        return ((i) % 2) == 1 ? "zebraGrey" : "zebraNone";
                    })
                    .attr("stroke", "none");

            var city = svg.selectAll(".branch")
                .data(data.mydata)
                .enter().append("g")
                .attr("class", "branch");

            city.append("path")
                .attr("class", "line")
                .attr("id", function(d){return d.id})
                .attr("data-legend",function(d){return d.label;})
                .attr("d", function (d) {
                    return line(d.values);
                })
                .style("stroke", myColor)
                .style("fill", "none")
                .style("stroke-width", 3);

            svg.selectAll("g.dot")
                .data(data.mydata)
                .enter().append("g")
                .attr("class", "dot")
                .selectAll("circle")
                .data(function(d) {return d.values; })
                .enter().append("circle")
                // .style("stroke", function (d){return d.color;})
                .attr("r", 2)
                .attr("cx", function(d,i) { return x(d.week); })
                .attr("cy", function(d,i) { return y(d.val); })
                .style("stroke", myColor)
                .style("fill", myColor)
                .style("stroke-width", 3)

                // Tooltip stuff after this
                .on("mouseover", tip.show)
                .on("mouseout", tip.hide);

            // add legend    
            var legend = svg.append("g")
                .attr("class", "legend")
                .attr("height", 100)
                .attr("width", 100)
                .attr('transform', 'translate('+ -1 * .37 * width + ',' + height +')');

                legend.selectAll('rect')
                    .data(data.mydata)
                    .enter()
                    .append("rect")
                    .attr("x", function(d, i){return i * 150 + 480})
                    .attr("y", 40)
                    .attr("width", 10)
                    .attr("height", 10)
                    .style("fill", myColor)
                    .style("stroke", "none");

                legend.selectAll('text')
                    .data(data.mydata)
                    .enter()
                    .append("text")
                    .attr("class", "legText")
                    .attr("x",  function(d, i){ return i * 150 + 500;})
                    .attr("y", 50)
                    .style("fill", myColor)
                    .style("stroke", "none")
                    .text(function(d){return d.label});


    });

问题是。当一切（看似）在正确的地方时，为什么我会收到错误？如何解决？

完全回调：

{{1}}

Answer 1

感谢大家对此进行调查。代码是对的，我在JSON本身有两个错位的coma引起了麻烦。谢谢你的关注。

未捕获的TypeError：无法读取未定义的属性'mydata'

1 个答案: