概要 实例 介绍 源码

柱状图

源文件:index.html

  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <style>
  4. body {
  5. font: 10px sans-serif;
  6. }
  7. .axis path,
  8. .axis line {
  9. fill: none;
  10. stroke: #000;
  11. shape-rendering: crispEdges;
  12. }
  13. .bar {
  14. fill: orange;
  15. }
  16. .bar:hover {
  17. fill: orangered ;
  18. }
  19. .x.axis path {
  20. display: none;
  21. }
  22. .d3-tip {
  23. line-height: 1;
  24. font-weight: bold;
  25. padding: 12px;
  26. background: rgba(0, 0, 0, 0.8);
  27. color: #fff;
  28. border-radius: 2px;
  29. }
  30. /* Creates a small triangle extender for the tooltip */
  31. .d3-tip:after {
  32. box-sizing: border-box;
  33. display: inline;
  34. font-size: 10px;
  35. width: 100%;
  36. line-height: 1;
  37. color: rgba(0, 0, 0, 0.8);
  38. content: "\25BC";
  39. position: absolute;
  40. text-align: center;
  41. }
  42. /* Style northward tooltips differently */
  43. .d3-tip.n:after {
  44. margin: -1px 0 0 0;
  45. top: 100%;
  46. left: 0;
  47. }
  48. </style>
  49. <body>
  50. <script src="http://d3js.org/d3.v3.min.js"></script>
  51. <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
  52. <script>
  53. var margin = {top: 40, right: 20, bottom: 30, left: 40},
  54. width = 960 - margin.left - margin.right,
  55. height = 500 - margin.top - margin.bottom;
  56. var formatPercent = d3.format(".0%");
  57. var x = d3.scale.ordinal()
  58. .rangeRoundBands([0, width], .1);
  59. var y = d3.scale.linear()
  60. .range([height, 0]);
  61. var xAxis = d3.svg.axis()
  62. .scale(x)
  63. .orient("bottom");
  64. var yAxis = d3.svg.axis()
  65. .scale(y)
  66. .orient("left")
  67. .tickFormat(formatPercent);
  68. var tip = d3.tip()
  69. .attr('class', 'd3-tip')
  70. .offset([-10, 0])
  71. .html(function(d) {
  72. return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
  73. })
  74. var svg = d3.select("body").append("svg")
  75. .attr("width", width + margin.left + margin.right)
  76. .attr("height", height + margin.top + margin.bottom)
  77. .append("g")
  78. .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  79. svg.call(tip);
  80. d3.tsv("data.tsv", type, function(error, data) {
  81. x.domain(data.map(function(d) { return d.letter; }));
  82. y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
  83. svg.append("g")
  84. .attr("class", "x axis")
  85. .attr("transform", "translate(0," + height + ")")
  86. .call(xAxis);
  87. svg.append("g")
  88. .attr("class", "y axis")
  89. .call(yAxis)
  90. .append("text")
  91. .attr("transform", "rotate(-90)")
  92. .attr("y", 6)
  93. .attr("dy", ".71em")
  94. .style("text-anchor", "end")
  95. .text("Frequency");
  96. svg.selectAll(".bar")
  97. .data(data)
  98. .enter().append("rect")
  99. .attr("class", "bar")
  100. .attr("x", function(d) { return x(d.letter); })
  101. .attr("width", x.rangeBand())
  102. .attr("y", function(d) { return y(d.frequency); })
  103. .attr("height", function(d) { return height - y(d.frequency); })
  104. .on('mouseover', tip.show)
  105. .on('mouseout', tip.hide)
  106. });
  107. function type(d) {
  108. d.frequency = +d.frequency;
  109. return d;
  110. }
  111. </script>

源文件:data.tsv

  1. letter frequency
  2. A .08167
  3. B .01492
  4. C .02780
  5. D .04253
  6. E .12702
  7. F .02288
  8. G .02022
  9. H .06094
  10. I .06973
  11. J .00153
  12. K .00747
  13. L .04025
  14. M .02517
  15. N .06749
  16. O .07507
  17. P .01929
  18. Q .00098
  19. R .05987
  20. S .06333
  21. T .09056
  22. U .02758
  23. V .01037
  24. W .02465
  25. X .00150
  26. Y .01971
  27. Z .00074