index.html

 <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <title>Gapminder Clone</title>
        <!-- Bootstrap -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- Custom styling -->
        <link rel="stylesheet" href="css/style.css">
    </head>

    <body>
        <nav class="navbar navbar-default">
            <div class="container">

            </div>
        </nav>

        <!-- Bootstrap grid setup -->
        <div class="container">
            <div class="row">
                <div id="chart-area"></div>
            </div>
        </div>

    <!-- External JS libraries -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>-->
    <script src="js/d3.min.js"></script>
    <script src="js/main.js"></script>


    </body>
    </html>


main.js
------------------

/*
*    main.js
*    Mastering Data Visualization with D3.js
*    2.5 - Activity: Adding SVGs to the screen
*/
document.addEventListener('DOMContentLoaded', function(e) {
var data=d3.csv("expenditure.csv").then(function(data){
  data.forEach(function(d){
     d.Budget= +d.Budget;
     d.Year= +d.Year;
})
});

var margin= {
  top:30,
  bottom:30,
  right:30,
  left:30
};

var width = 800-margin.left-margin.right;
var height = 300-margin.top-margin.bottom;

var x = d3.scaleLinear()
.domain([2000,90000])
.range([0,width]);

var y = d3.scaleLinear()
.domain([0,8])
.range([0,height]);


   var svg = d3.select("#chart-area")
       .append("svg")
           .attr("width", 700 + margin.left + margin.right)
           .attr("height", 200 + margin.top + margin.bottom)
           .attr("transform", "translate(" + margin.left +
               ", " + margin.top + ")");


   var rects = svg.selectAll("rect").data(data);
   rects.enter().append("rect")
   .attr("x",0)
   .attr("y",function(d,i) {
   return y(i);
 })
   .attr("width",function(d){
      if(d.Country=="France"){
        return x(d.Budget);
      }else {
        return x(d.Budget);
      }
   })
   .attr("height",function(d,i) {
   return y(1)-8;
 })
   .attr("fill",function(d){

     if(d.Country=="Australia")
     {
       return "yellow";
     }else if(d.Country=="Canada"){
       return "green";
     }else if(d.Country=="Brazil"){
       return "Orange";
     }else {
       return "blue";
     }
})

rects.enter().append("text")
//.classed("bar-label",true)
.attr("x",function(d,i) {
return x(d.Budget);
})
.attr("dx",3)
.attr("y",function(d,i) {
return y(i);
})
.attr("dy",function(d,i) {
return y(1)/1.5-5;
})
.text(function(d,i) {
return d.Budget;
})
});

Expenditure.csv
-------------------------------
Country,Year,Budget
Australia,1990,6704
Australia,2014,25784
Brazil,1990,9236
Brazil,2014,32660
Canada,1990,11415
Canada,2014,17854
France,1990,42590
France,2014,63614

Answer 1

您的代码中有错字。在main.js文件的第11行：

var data=d3.csv("expenditure.csv").then(function(data){
  data.forEach(function(d){
     d.Budget= +d.Budget;
     d.Year= +d.Year;
//})
});

您应该在注释处加上}）刹车，并将其放在文件末尾。之后，它可以完美运行。

条形图未在SVG中显示

index.html

1 个答案: