搜索
搜索

使用D3 JS绘制条形图

codeclue 发表于 Dev
93
代码提示

我正在绘制条形图D3.js (Version 3)。它有两个轴，一个是receive_data，另一个是responses。我有一个存储数据的JSON文件。JSON格式看起来像

[{"receive_date":"2013-11-04","responses":"2"}]

在我的JSON中，我有两个responses日期相同的值2013-11-04。喜欢，

[{"receive_date":"2013-11-04","responses":"2"},{"receive_date":"2013-11-04","responses":"8668"}

这是JSON来源：-https: //api.myjson.com/bins/gdpu7

因此，当我绘制图形时，它并没有采用相同的receive_date的值之和，而是显示了两次。我希望它显示的总和responses。responses应该是(8668+2)为了receive_date 2013-11-04

我还发现通过使用reduce可以做到这一点。我尝试使用d3.json.reduce。但是它显示错误d3.json.reduce不是函数。

var margin = {
    top: 20,
    right: 30,
    bottom: 30,
    left: 40
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

// scale to ordinal because x axis is not numerical
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);

//scale to numerical value by height
var y = d3.scale.linear().range([height, 0]);

var chart = d3.select("#chart")
  .append("svg") //append svg element inside #chart
  .attr("width", width + (2 * margin.left) + margin.right) //set width
  .attr("height", height + margin.top + margin.bottom); //set height
var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom"); //orient bottom because x-axis will appear below the bars

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");

d3.json("https://api.myjson.com/bins/gdpu7", function(error, data) {
  x.domain(data.map(function(d) {
    return d.receive_date
  }));
  y.domain([0, d3.max(data, function(d) {
    return d.responses
  })]);

  var bar = chart.selectAll("g")
    .data(data)
    .enter()
    .append("g")
    .attr("transform", function(d, i) {
      return "translate(" + x(d.receive_date) + ", 0)";
    });

  bar.append("rect")
    .attr("y", function(d) {
      return y(d.responses);
    })
    .attr("x", function(d, i) {
      return x.rangeBand() + (margin.left / 2);
    })
    .attr("height", function(d) {
      return height - y(d.responses);
    })
    .attr("width", x.rangeBand()); //set width base on range on ordinal data

  bar.append("text")
    .attr("x", x.rangeBand() + margin.left)
    .attr("y", function(d) {
      return y(d.responses) - 10;
    })
    .attr("dy", ".75em")
    .text(function(d) {
      return d.responses;
    });

  chart.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(" + margin.left + "," + height + ")")
    .call(xAxis);

  chart.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + margin.left + ",0)")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("responses");
});

function type(d) {
  d.receive_date = +d.receive_date; // coerce to number
  return d;
}
#chart rect {
  fill: #4aaeea;
}

#chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #fff;
  shape-rendering: crispEdges;
}

body {
  background: #1a1a1a;
  color: #eaeaea;
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chart"></div>

的jsfiddle： - https://jsfiddle.net/bL9940at/

拉斐尔卡斯特罗库托

相关部分：

  var array1 = data; //input
  var array2 = [];
  var last_d;
  array1.reduce(function (accumulator, currentValue, i) {
    var r = Number(currentValue.responses),
        d = currentValue.receive_date;
    if (d == last_d) r += accumulator;
    array2[i] = {
      receive_date: d,
      responses: r
    };
    last_d = d;
    return accumulator + Number(currentValue.responses);
  }, 0);
  data = array2; //output


var margin = {
    top: 20,
    right: 30,
    bottom: 30,
    left: 40
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

// scale to ordinal because x axis is not numerical
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
//scale to numerical value by height
var y = d3.scale.linear().range([height, 0]);

var chart = d3.select("#chart")
  .append("svg") //append svg element inside #chart
  .attr("width", width + (2 * margin.left) + margin.right) //set width
  .attr("height", height + margin.top + margin.bottom); //set height
var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom"); //orient bottom because x-axis will appear below the bars

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");

d3.json("https://api.myjson.com/bins/gdpu7", function(error, data) {
  
  //create new arrays

  var array1 = data; //input
  var array2 = [];
  var last_d;

  array1.reduce(function (accumulator, currentValue, i) {
    var r = Number(currentValue.responses),
        d = currentValue.receive_date;
    if (d == last_d) r += accumulator;
    array2[i] = {
      receive_date: d,
      responses: r
    };
    last_d = d;
    return accumulator + Number(currentValue.responses);
  }, 0);
  data = array2; //output
 
  x.domain(data.map(function(d) {
    return d.receive_date;
  }));
  y.domain([0, d3.max(data, function(d) {
    return d.responses;
  })*1.1]);

  var bar = chart.selectAll("g")
    .data(data)
    .enter()
    .append("g")
    .attr("transform", function(d, i) {
      return "translate(" + x(d.receive_date) + ", 0)";
    });

  bar.append("rect")
    .attr("y", function(d) {
      return y(d.responses);
    })
    .attr("x", function(d, i) {
      return x.rangeBand() + (margin.left / 2);
    })
    .attr("height", function(d) {
      return height - y(d.responses);
    })
    .attr("width", x.rangeBand()); //set width base on range on ordinal data

  bar.append("text")
    .attr("x", x.rangeBand() + margin.left)
    .attr("y", function(d) {
      return y(d.responses) - 10;
    })
    .attr("dy", ".75em")
    .text(function(d) {
      return d.responses;
    });

  chart.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(" + margin.left + "," + height + ")")
    .call(xAxis);

  chart.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + margin.left + ",0)")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("responses");
});

function type(d) {
  d.receive_date = +d.receive_date; // coerce to number
  return d;
}
#chart rect {
  fill: #4aaeea;
}

#chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #fff;
  shape-rendering: crispEdges;
}

body {
  background: #1a1a1a;
  color: #eaeaea;
  padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-git.js"></script>
<div id="chart"></div>
</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用D3.js从MySQL数据库绘制条形图

使用d3.js制作分组条形图

用python绘制3D条形图

d3响应条形图

如何使用Pandas绘制条形图？

d3 js双向水平条形图

具有scaleTime的D3 JS条形图

使用matplotlib和子图绘制多个条形图

用Matlab绘制3D条形图

如何绘制具有3个变量的条形图？

使用R逐行绘制条形图

如何使用ggplot绘制条形图

使用分组依据绘制条形图

条形图的条形图之间的d3js网格线

使用JFreechart绘制多个图（条形图，XY）

使用d3绘制轮廓图（条形图）

无法使用gnuplot绘制条形图

在Matlab的地图上绘制3d条形图

D3 v4 更新条形图不绘制最后一个条形图

使用 d3.js 制作条形图

如何在 d3 中绘制镜像 x 轴（倒置）条形图？

D3 条形图镜像

使用 d3.js 的可缩放条形图

如何使用 highcharts/d3.js 或任何其他图表库绘制线加条形图？

使用条形图绘制变量的均值

D3.js 水平旋转/绘制条形图

使用 twinx 绘制条形图后调整条形图和无花果大小

使用 Seaborn 绘制条形图

使用数据绘制条形图

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档