Блог

Главная - Вопросы по программированию - D3.js : Столбцы на гистограмме, шкалы неправильно моделируют данные

D3.js : Столбцы на гистограмме, шкалы неправильно моделируют данные

#javascript #d3.js #bar-chart

#javascript #d3.js #гистограмма

Вопрос:

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

Я моделирую гистограмму с D3.js и данные не представляются столбиками, как это предполагалось….это была бы правильная диаграмма

введите описание изображения здесь

И это моя диаграмма:

введите описание изображения здесь

По какой-то причине мои шкалы кажутся неправильными…Я упорядочил данные по GDP с помощью Lodash, и это кажется правильным на консоли. Json содержит ВВП за год и сам год. Кто-нибудь видит проблему с настройкой моих масштабов?. Это мой файл .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 ?…..Спасибо!

Ответ №1:

Ваши height y вычисления и отключены. Если вы ссылаетесь на почтенный пример столбчатой диаграммы, он должен быть:

   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>

Комментарии:

1. он не работает: S, не показывает никакой графики codepen.io/juanf03/pen/YGyyjY?editors=1111

2. столбцы не отображаются, только ось Y ….. запустите фрагмент кода, и вы увидите….

3. @Juan, у меня это работает. Пожалуйста, попробуйте еще раз. Я загрузился lodash http , поэтому, если вы посетите stackoverflow as https , возможно, фрагмент был запущен неправильно.

4. не могли бы вы поделиться этим в codepen, когда сможете?. Я не вижу столбцов ни с http, ни с https

5. @Juan, вот ваш график, все исправлено .