d3js無法解析JSON數據

Question

我有以下格式

[{ 
"dayTime1": { 
    "timestamp": ["01\/02\/2014 16:59", "02\/02\/2014 16:59", "03\/02\/2014 16:59", "04\/02\/2014 16:59", "05\/02\/2014 16:59", "06\/02\/2014 16:59", "07\/02\/2014 16:59", "08\/02\/2014 16:59", "09\/02\/2014 16:59", "10\/02\/2014 16:59", "11\/02\/2014 16:59", "12\/02\/2014 16:59"], 
    "phase1": ["33962", "34273", "45274", "46969", "54078", "53361", "46848", "15377", "15278", "27051", "48179", "30228"], 
    "phase2": ["34702", "33259", "39046", "45921", "57756", "58406", "58543", "30094", "31006", "46553", "26914", "47677"], 
    "phase3": ["15230", "15304", "15436", "16251", "15232", "19469", "15249", "13478", "16626", "19946", "18332", "16766"] 
} 

}]

json文件，在閱讀這個我d3js代碼給出了以下錯誤Uncaught TypeError: Object [object Array] has no method 'substring'

我訪問該值使用d.dayTime1.timestampd.dayTime1.phase1等。

$('#kwh').on('click', function() { 
    var endDate = new Date(Date.parse($('#to').val())); 
    $('#kwh').prop("disabled",true); 

    var margin = { 
     top: 50, 
     right: 20, 
     bottom: 50, 
     left: 100 
    }, 
     width = 1000 - margin.left - margin.right, 
     height = 400 - margin.top - margin.bottom; 

    var parseDate = d3.time.format("%d/%m/%Y %H:%M").parse; 

    var x = d3.time.scale().range([0, width]); 
    var y = d3.scale.linear().range([height, 0]); 

    var xAxis = d3.svg.axis().scale(x) 
     .orient("bottom").ticks(15); 
    var yAxis = d3.svg.axis().scale(y) 
     .orient("left").ticks(10); 
    var yAxis1 = d3.svg.axis().scale(y) 
     .orient("right").ticks(10);  

    var valueline = d3.svg.line() 
      .x(function(d) { return x(d.dayTime1.timestamp); }) 
      .y(function(d) { return y((d.dayTime1.phase1)/1000); }); 

    var valueline2 = d3.svg.line() 
      .x(function(d) { return x(d.dayTime1.timestamp); }) 
      .y(function(d) { return y((d.dayTime1.phase2)/1000); }); 

    var valueline3 = d3.svg.line() 
      .x(function(d) { return x(d.dayTime1.timestamp); }) 
      .y(function(d) { return y((d.dayTime1.phase3)/1000); });     

    var svg = d3.select("#graph") 
     .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 + ")"); 

    /* function make_x_axis() { 
     return d3.svg.axis() 
     .scale(x) 
     .orient("yop") 
     .ticks(20) 
     }*/ 
    function make_y_axis() { 
     return d3.svg.axis() 
     .scale(y) 
     .orient("left") 
     .ticks(10) 
     } 

    d3.json("<?php echo base_url(); ?>uploads/<?php echo $username; ?>-dayTime1.json", function(error, data) { 
     data.forEach(function(d) { 
      d.dayTime1.timestamp = parseDate(d.dayTime1.timestamp); 
      d.dayTime1.phase1 = +d.dayTime1.phase1; //<=== 
      d.dayTime1.phase2 = +d.dayTime1.phase2; // <=== 
      d.dayTime1.phase3 = +d.dayTime1.phase3; // <=== 

     }); 

     x.domain(d3.extent(data, function(d) {return d.dayTime1.timestamp;})); 
     y.domain([0, d3.max(data, function(d) { 
       var decValue = Math.max(d.dayTime1.phase1, d.dayTime1.phase2, d.dayTime1.phase3); 
       return (decValue/1000); 
    })]); 

    svg.append("path") 
     .attr("class","line") 
/*  .style("stroke", "yellow");*/ 
     .attr("d", valueline(data)); 

    svg.append("path") 
     .attr("class", "line1") 
     .style("stroke", "red") 
     .attr("d", valueline2(data)); 

    svg.append("path") 
     .attr("class", "line2") 
     .style("stroke", "green") 
     .attr("d", valueline3(data)); 

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

    svg.append("g") // Add the Y Axis 
     .attr("class", "y axis") 
      .call(yAxis); 

    svg.append("g") // Add the Y Axis 1 
     .attr("class", "y1 axis") 
     .attr("transform", "translate("+width+",0)") 
      .call(yAxis1);   

    svg.append("text") // text label for the x axis 
     .attr("x", (width/2)) 
     .attr("y", height + 50) 
     .style("text-anchor", "middle") 
     .style("font-weight", "bold") 
     .text("Date");   

    svg.append("text") 
     .attr("x", -200) 
     .attr("y", -40)  
     .attr("class","leftlegend") 
     .style("font-weight", "bold") 
     .text("KWH Per Phase"); 

    }); 

    /*svg.append("g") 
     .attr("class", "grid") 
     .attr("transform", "translate(0," + height + ")") 
     .call(make_x_axis() 
     .tickSize(-height, 0, 0) 
     .tickFormat("") 
     );*/ 


    svg.append("g") 
    .attr("class", "grid") 
    .call(make_y_axis() 
    .tickSize(-width, 0, 0) 
    .tickFormat("") 
    ); 

}); 

這是訪問它的正確方法嗎？

Answer 1

它看起來像你的代碼（像大多數D3代碼）期望行主數據，而你的數據是列主要的。代碼希望能夠找到一個對象數組，而您的數據是一個數組對象。因此，該問題試圖對數組進行字符串操作，以進行日期解析。