踢开数据可视化的大门

作者:杨润炜
日期:2015/12/17 22:18

数据可视化有助于数据分析与数据交流,在这种大数据时代来说是必不可少的。前端有不少做数据可视化的工具,D3.js为其中杰出代表。
这段时间用了一下d3js,做了个饼图,觉得做这种图表,数学的基础十分重要,而且svg的操作也是个细致活,需要耐心和细心。好在这段时间比较有空,让我有机会踢这么一脚。

推荐跟我一样的初学者看看数据可视化专题站

接下来介绍一下我这段时间研制的新鲜饼图

1.html代码

  1. <style type="text/css">
  2. #typeArticlePie .title {
  3. width: 400px;
  4. text-align: center;
  5. }
  6. </style>
  7. <div id="typeArticlePie"></div>
  8. <script src="http://d3js.org/d3.v3.min.js"></script>
  9. <script src="http://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>

2.js脚本

  1. var jData = {data: [{value: 4, label: 'tech'}, {value: 7, label: 'life'}]};
  2. var width = jData.width || 400;
  3. var height = jData.height || 400;
  4. var data = jData.data;
  5. var dataset = _.map(data, function (item) {
  6. return item.value;
  7. });
  8. var svgContainer = d3.select("#typeArticlePie"); // 外容器
  9. var totalSize = _.reduce(dataset, function(memo, num){ return memo + num; }, 0);
  10. var svg, pie, piedata, arc, pieChartElement, arcs;
  11. var color = d3.scale.category10(); // 颜色分配器
  12. // 添加标题
  13. var addTitle = function () {
  14. svgContainer
  15. .append("p")
  16. .text('类型文章数量统计')
  17. .attr('class', 'title');
  18. };
  19. // 创建svg
  20. var createSvg = function () {
  21. svg = svgContainer
  22. .append("svg")
  23. .attr("width", width)
  24. .attr("height", height);
  25. };
  26. // 初始化数据
  27. var initData = function () {
  28. pie = d3.layout.pie();
  29. piedata = pie(dataset);
  30. var outerRadius = width/2; //外半径
  31. var innerRadius = 0; //内半径,为0则中间没有空白
  32. arc = d3.svg.arc() //弧生成器
  33. .innerRadius(innerRadius) //设置内半径
  34. .outerRadius(outerRadius) //设置外半径
  35. .startAngle(0)
  36. .endAngle(function(d) {
  37. return (d.value / totalSize) * 2 * Math.PI;
  38. });
  39. };
  40. // 创建饼图
  41. var createPie = function () {
  42. // pieChartElement为饼图容器
  43. pieChartElement = svg
  44. .append('g')
  45. // 左上角容器平移到外容器的几何中心,之后path的rotate旋转便以此为旋转中心
  46. .attr("transform", "translate("+ (width/2) +","+ (width/2) +")")
  47. .attr("class", "pieChart");
  48. arcs = pieChartElement.selectAll(".pie-item")
  49. .data(piedata)
  50. .enter()
  51. .append("g")
  52. .attr('class', 'pie-item')
  53. .attr("transform",
  54. function(d, i) {
  55. var angle = 0;
  56. if (i > 0) {
  57. angle = (dataset[i-1]/totalSize)*360;
  58. }
  59. return "rotate(" + angle + ")";
  60. });
  61. };
  62. // 渲染(添加颜色与动画)
  63. var render = function () {
  64. arcs.append("path")
  65. // 填充颜色
  66. .attr("fill",function(d,i){
  67. return color(i);
  68. })
  69. .transition()
  70. .ease("cubic-in-out")
  71. .duration(1000)
  72. // 实现动画效果,需要用到attrTween
  73. .attrTween("d", function(b) {
  74. var i = d3.interpolate({ value: 0}, b);
  75. return function(t) {
  76. return arc(i(t));
  77. };
  78. });
  79. };
  80. // 添加备注
  81. var addText = function () {
  82. arcs.append("text")
  83. // 饼图的扇形部分经过旋转后,其内的文字也需要相当旋转,角度为360减去扇形的旋转角度
  84. .attr("transform",function(d, i){
  85. var angle = 0;
  86. if (i > 0) {
  87. angle = 360 - (dataset[i-1]/totalSize)*360;
  88. }
  89. return "translate(" + arc.centroid(d) + "), rotate(" + angle + ")";
  90. })
  91. .attr("text-anchor","middle")
  92. .text(function(d, i){
  93. return (data[i].label === 'tech' ? '技术' : '生活杂记') + ':' + d.data;
  94. })
  95. .style("font-size", (width > 320 ? 14 : 12) + "px")
  96. .attr("fill", function(d) { return '#fff'; });
  97. };
  98. // 程序入口
  99. var main = function () {
  100. addTitle();
  101. createSvg();
  102. initData();
  103. createPie();
  104. render();
  105. addText();
  106. };
  107. main();

效果看这里喔,左侧的饼图就是了,右边那个是用d3pie做的。

这是研究数据可视化专题站上的文章d3pie源码的结果。

感谢您的阅读!
如果看完后有任何疑问,欢迎拍砖。
欢迎转载,转载请注明出处:http://www.yangrunwei.com/a/11.html
邮箱:glowrypauky@gmail.com
QQ: 892413924