D3.js：条形图中的条形，刻度未正确建模数据

Question

https://codepen.io/juanf03/pen/YGyyjY?editors=1111

我正在使用 D3.js 对条形图进行建模，但数据并未像预期的那样由条形表示....这将是正确的图表

这是我的图表：

由于某种原因，我的比例似乎不正确...我用 lodash 按 GDP 排序数据，这在控制台上似乎是正确的。 json 包含当年的 GDP 和年份本身。有人看到设置我的秤有问题吗？这是我的 .js 文件。

$('document').ready(function() {

  var url = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json';

  var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

  //build svg with class chart
  var width=800, height=600, padding=50;
  var  canvas=d3.select('#holder').append('svg').attr('id','chart').style({"width":width,"height":height}).attr('transform','translate(' + padding + ',' + padding + ')');;


  d3.json(url, function( data ) {
  let datausa=_.sortBy(data.data,1),barWidth=Math.ceil(width/data.data.length);
 console.log(datausa);
    var svg = d3.select("svg");
console.log(datausa);
d3.select(".notes").append("text").text(data.description);

  var maxMinYearSet=d3.extent(datausa,function(d){
      return d[0].substring(0,4);
  });


  //build x scale, year
  var xScale=d3.time.scale()
  .range([0,width])
  .domain(maxMinYearSet);

  //build y scale, gross dom prod

  var maxY=d3.max(datausa,function(d){
    return d[1];
  });

  var yScale=d3.scale.linear()
  .domain([0,maxY])
  .range([height-padding,0]);


   //set up the x axis
    var xAxis = d3.svg.axis().scale(xScale)
                             .orient("bottom")
                             .ticks(20);

   //set up the y axis
    var yAxis = d3.svg.axis().scale(yScale)
                             .orient("left")
                             .ticks(20);


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

      canvas.append("g")
          .attr("class", "y axis")
          .call(yAxis);


  var rect= canvas.selectAll('rect.rectangle')
             .data(datausa)
             .enter()
             .append('rect').attr('class','rectangle');

 rect.attr('x',function(d,i){
  return i*barWidth;
});

 rect.attr('y',function(d){
  return 0;
}); 

rect.attr('height',function(d){
  return yScale(d[1]);
});  

rect.attr('width',function(d){
  return 20;
}); 

rect.on("mouseover", function(d){
  console.log(d3.select(this));

});

rect.on("mouseleave",function(d){

});


});


});

这是我的 html 文件：

<div id="container" class="container">
  <div id="title">
    US Gross Domestic Product by quarter
    </id>
  <div id="holder">


  </div> 
   <div class="notes">

      </div>

</div>

还有我的 CSS：

#holder{
  border: 1px black solid;

}

.rectangle{
  fill:#0097A7;
  margin:10px;
}

svg{
   /*-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(180deg);
    transform:scaleY(-1);
    -moz-transform: scaleY(-1);*/
}

图表也颠倒了，有没有不使用 css 转换来纠正它？.....谢谢！

Answer 1

您的 height 和 y 计算已关闭。如果参考venerable bar chart example，应该是：

  rect.attr('y', function(d) {
    return  yScale(d[1]);
  });

  rect.attr('height', function(d) {
    return height - yScale(d[1]);
  });

运行代码：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <script data-require="lodash.js@4.16.2" data-semver="4.16.2" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.2/lodash.js"></script>
  <style>
    #holder {
      border: 1px black solid;
    }
    
    .rectangle {
      fill: #0097A7;
      margin: 10px;
    }
    
    svg {
      /*-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(180deg);
    transform:scaleY(-1);
    -moz-transform: scaleY(-1);*/
    }
  </style>
</head>

<body>
  <div id="container" class="container">
    <div id="title">
      US Gross Domestic Product by quarter
    </div>
    <div id="holder"></div>
    <div class="notes"></div>
  </div>
  <script>
    var url = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json';

    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

    //build svg with class chart
    var width = 800,
      height = 600,
      padding = 50;
    var canvas = d3.select('#holder').append('svg').attr('id', 'chart').style({
      "width": width,
      "height": height
    }).attr('transform', 'translate(' + padding + ',' + padding + ')');;


    d3.json(url, function(data) {
      let datausa = _.sortBy(data.data, 1),
        barWidth = Math.ceil(width / data.data.length);
      console.log(datausa);
      var svg = d3.select("svg");
      console.log(datausa);
      d3.select(".notes").append("text").text(data.description);

      var maxMinYearSet = d3.extent(datausa, function(d) {
        return d[0].substring(0, 4);
      });


      //build x scale, year
      var xScale = d3.time.scale()
        .range([0, width])
        .domain(maxMinYearSet);

      //build y scale, gross dom prod

      var maxY = d3.max(datausa, function(d) {
        return d[1];
      });

      var yScale = d3.scale.linear()
        .domain([0, maxY])
        .range([height - padding, 0]);


      //set up the x axis
      var xAxis = d3.svg.axis().scale(xScale)
        .orient("bottom")
        .ticks(20);

      //set up the y axis
      var yAxis = d3.svg.axis().scale(yScale)
        .orient("left")
        .ticks(20);


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

      canvas.append("g")
        .attr("class", "y axis")
        .call(yAxis);


      var rect = canvas.selectAll('rect.rectangle')
        .data(datausa)
        .enter()
        .append('rect').attr('class', 'rectangle');

      rect.attr('x', function(d, i) {
        return i * barWidth;
      });

      rect.attr('y', function(d) {
        return  yScale(d[1]);
      });

      rect.attr('height', function(d) {
        return height - yScale(d[1]);
      });

      rect.attr('width', function(d) {
        return 20;
      });

      rect.on("mouseover", function(d) {
        console.log(d3.select(this));

      });

      rect.on("mouseleave", function(d) {

      });


    });
  </script>
</body>

</html>