javascript - D3.js:条形图中的条形，比例尺未正确建模数据-6ren

javascript - D3.js:条形图中的条形，比例尺未正确建模数据

转载作者：行者123 更新时间：2023-12-02 14:09:08

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 转换的情况下纠正它？.....谢谢!

最佳答案

您的高度和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>

关于javascript - D3.js:条形图中的条形，比例尺未正确建模数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39799960/

文章推荐： javascript - AJAX 请求后提供 Select2 数据

文章推荐： javascript - 将className添加到li item React中

php - 条形/竖线分隔字段
有人知道如何在数组字段中插入以竖线/竖线分隔的数组吗？逗号可以正常工作，但是当我将其更改为 bar 时，它会产生错误“格式错误的数组文字” 示例(有效): insert into table (ar
r - 条形 geom_bar 之间的不同空间
我尽力阅读与我的问题相关的问题。最相关的是:question .但是我无法弄清楚如何解决我的问题。我有一个像这样的数据集 structure(list(COMPANY = structure(1
python - Matplotlib - 基于数据的动态(条形)图表高度？
在使用 matplotlib 挣扎了比我想承认的时间更长的时间之后，我试图在我使用过的几乎任何其他绘图库中做一些轻而易举的事情，我决定向 Stackiverse 寻求一些见解。简而言之，我需要的是创建
java - Android 条形 Activity 指示器
如何实现带有条形样式的 Activity 指示器。根据以下文档http://developer.android.com/design/building-blocks/progress.html “Ac
PHP:帮助格式化 Google(条形)图表
我正在尝试使用数组中的数据制作水平条形图 $values = implode(',', array_values($type)); $labels = implode('|', array_keys(
html - 如何使用 CSS 创建这个带 Angular 条形
这个问题在这里已经有了答案: Two-tone background split by diagonal line using css (7 个答案) Create a slanted edge
python - Matplotlib Pyplot 条形图中的 float 条形
我正在处理一个范围非常大的图表，我发现条形图偏离了轴。我怎样才能阻止这个？这是我在教程中编写的一个示例，因为我的数据是通过读取大量文件获取的。这说明了我遇到的问题。我给出了标准差，意味着一个很大的范围
ios - 在 Swift 中更改 UIProgressView(条形)的高度
我在 Swift 2.2 中创建了一个 UIProgressView(条形)，现在想改变它的高度。其他一些帖子建议使用 CGAffineTransformScale 来更改高度。但是，出于某种原因，这
javascript - 如何使用 Google 图表工具为 Y 轴创建具有两种不同比例的(条形)图表？
我想在条形图上绘制两组具有不同比例的值。例如，对于一周中的每一天，我都有一个比例(比如那天同事迟到的比例)和一个值(他们平均迟到多长时间)。这两个值可以绘制在两个单独的图表上，但将它们放在同一个图表
javascript - 在 Google 图表(组合图表)中显示/隐藏线条/条形
我想制作一个具有隐藏/显示功能的组合(线/条)图。我遇到的问题是我不知道如何指定索引更改(对于 javascript 来说是新的)这是我的示例(取消选中前两个复选框之一并重新选中它以查看问题): ht
c++ - 键入 “$” 命令不会跳转到行尾 [光标设置为 “|”(条形/管道)而不是 block 形]
我安装了 YCM(你完成了我)，当我编码时，我发现命令 $ 不工作。它不会跳到行尾，而是跳到最后一行。例如，a.cpp 中的一行: #include| 现在光标在 include 之后，然后我键
javascript - 条形 Highcharts 中 stackLabels Formatter 中的 X 轴值
我想在条形图顶部显示自定义标签。下面是我的 stacklabel 代码，这里的问题是我想在 stacklabel 的格式化程序中使用堆栈的类别名称，我该如何访问它。 stackLabels: {

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - D3.js:条形图中的条形，比例尺未正确建模数据