d3條形圖沒有顯示或給我任何錯誤工作從

Question

好吧，所以我想製作一個D3圖表，但是當我什麼都沒做時出現。下面是如何我的數據在JSON出來：

[{"Commodity":"Base","num_complete_print":"3","num_incomplete_print":15},{"Commodity":"Blade","num_complete_print":"1","num_incomplete_print":53},{"Commodity":"DTE","num_complete_print":"1","num_incomplete_print":17},{"Commodity":"HUB","num_complete_print":"0","num_incomplete_print":"18"},{"Commodity":"MH","num_complete_print":"0","num_incomplete_print":"18"},{"Commodity":"Mid","num_complete_print":"0","num_incomplete_print":18},{"Commodity":"Top","num_complete_print":"0","num_incomplete_print":18}]  

這裏是我的JavaScript ....

<script type="text/javascript"> 

    var margin = {top: 20, right: 20, bottom: 100, left: 100}, 
     width = 750 - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom; 

    var x = d3.scale.ordinal() 
     .rangeRoundBands([0, width-100], .1); //width-100 to make room for the legend. 

    var y = d3.scale.linear() 
     .rangeRound([height, 0]); 

    var color = d3.scale.ordinal() 
     //.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 
     //.range(["#1f77b4", "#ff7f0e","d62728"]); //blue, orange, red 
     //color code for Progress Report 
     .range(["#00FFFF","#00FF00","#990099","#FF0000","#FFFF00"]); 

    var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom"); 

    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left") 
     .tickFormat(d3.format(".2s")); 

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


     // Get the data 
    var data = <?php echo json_encode($dataset_progress001); ?>; 

    //d3.csv("data.csv", function(error, data) { 
     color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Commodity"; })); 

     data.forEach(function(d) { 
     var y0 = 0; 
     d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; }); 
     d.total = d.ages[d.ages.length - 1].y1; 
     }); 

     //use this to sort the bars from largest to smallest 
     //data.sort(function(a, b) { return b.total - a.total; }); 

     x.domain(data.map(function(d) { return d.Commodity; })); 
     y.domain([0, d3.max(data, function(d) { return d.total; })]); 

     svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis) 
      .selectAll("text") //added this line through rotate to change orientation of x axis 
      .style("text-anchor", "end") 
      .attr("dx", "-.8em") 
      .attr("dy", "-1em") 
      .attr("transform", function(d) { 
       return "rotate(-90)" 
       }); 

     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"); 
     // .text("Population"); 

     var state = svg.selectAll(".state") 
      .data(data) 
     .enter().append("g") 
      .attr("class", "g") 
      .attr("transform", function(d) { return "translate(" + x(d.Commodity) + ",0)"; }); 

     state.selectAll("rect") 
      .data(function(d) { return d.ages; }) 
     .enter().append("rect") 
      .attr("width", x.rangeBand()) 
      .attr("y", function(d) { return y(d.y1); }) 
      .attr("height", function(d) { return y(d.y0) - y(d.y1); }) 
      .style("fill", function(d) { return color(d.name); }); 

     var legend = svg.selectAll(".legend") 
      .data(color.domain().slice().reverse()) 
     .enter().append("g") 
      .attr("class", "legend") 
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

     legend.append("rect") 
      .attr("x", width - 18) 
      .attr("width", 18) 
      .attr("height", 18) 
      .style("fill", color); 

     legend.append("text") 
      .attr("x", width - 24) 
      .attr("y", 9) 
      .attr("dy", ".35em") 
      .style("text-anchor", "end") 
      .text(function(d) { return d; }); 

    //Added y label 10/28 
    svg.append("text") 
     .attr("class", "y label") 
     .attr("text-anchor", "end") 
     .attr("y", -60) 
     .attr("x",-190) 
     .attr("dy", ".75em") 
     .attr("transform", "rotate(-90)") 
     .text("Number Of Components"); 
</script> 

當然，在我的身體和我有這個

<div id="area_progress_report"></div> 

我究竟做錯了什麼？我包括本地D3 ......

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- added to try to avoid the d3 is not valid --> 
      <script type="text/javascript" src="d3-master/d3.v3.js"></script> <!-- load the d3.js library -->  

      <script type="text/javascript" src="d3-master/d3.v3.min.js"></script> <!-- load the d3.js library --> 

Answer 1

似乎爲我工作：

http://jsfiddle.net/wqHqP/

我簡單地更換行：

var data = <?php echo json_encode($dataset_progress001); ?>; 

與輸出JSON。