1. 前言
色阶图适合二维的数据，而且横轴跟纵轴的标签都比较多。本期的数据：
Example data shows concurrent user sessions over time, taken from a development environment.
翻译过来大意就是：展示的是随着时间的推移用户会话并发的个数
数据结构：
| 星期数 | 时间点 | 会话数 |
| day | hour | value |
| 1 | 1 | 16 |
资料来源：http://bl.ocks.org/tjdecke/5558084
2. 色阶图
图：
本地链接：http://127.0.0.1/Example/case3-color/color2.html
知识点： 1. 怎么画色阶图
2. 读取csv格式数据画图
3. 图形的转变效果: d3.transition().duration()
完整的网页代码：
1 <!DOCTYPE html>
2 <meta charset="utf-8">
3 <html>
4 <head>
5 <style>
6 rect.bordered {
7 stroke: #E6E6E6;
8 stroke-width:2px;
9 }
10
11 text.mono {
12 font-size: 9pt;
13 font-family: Consolas, courier;
14 fill: #aaa;
15 }
16
17 text.axis-workweek {
18 fill: #000;
19 }
20
21 text.axis-worktime {
22 fill: #000;
23 }
24 </style>
25 <script src="http://d3js.org/d3.v3.js"></script>
26 </head>
27 <body>
28 <div id="chart"></div>
29 <div id="dataset-picker">
30 </div>
31 <script type="text/javascript">
32 //一些全局变量
33 var margin = { top: 50, right: 0, bottom: 100, left: 30 },
34 width = 960 - margin.left - margin.right,
35 height = 430 - margin.top - margin.bottom,
36 gridSize = Math.floor(width / 24),
37 legendElementWidth = gridSize*2,
38 buckets = 9,
39 colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"], // alternatively colorbrewer.YlGnBu[9]
40 days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
41 times = ["1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12a"
42 ,"13p", "14p", "15p", "16p", "17p", "18p", "19p", "20p", "21p", "22p", "23p", "24p"];
43 datasets = ["data.csv", "data2.csv"]; //数据文件变量
44 //画布
45 var svg = d3.select("#chart").append("svg")
46 .attr("width", width + margin.left + margin.right)
47 .attr("height", height + margin.top + margin.bottom)
48 .append("g")
49 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
50 //日期轴Y
51 var dayLabels = svg.selectAll(".dayLabel")
52 .data(days)
53 .enter().append("text")
54 .text(function (d) { return d; })
55 .attr("x", 0)
56 .attr("y", function (d, i) { return i * gridSize; })
57 .style("text-anchor", "end")
58 .attr("transform", "translate(-6," + gridSize / 1.5 + ")")
59 .attr("class", function (d, i) { return ((i >= 0 && i <= 4) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); }); //轴标签是否明显显示
60 //时间轴X
61 var timeLabels = svg.selectAll(".timeLabel")
62 .data(times)
63 .enter().append("text")
64 .text(function(d) { return d; })
65 .attr("x", function(d, i) { return i * gridSize; })
66 .attr("y", 0)
67 .style("text-anchor", "middle")
68 .attr("transform", "translate(" + gridSize / 2 + ", -6)")
69 .attr("class", function(d, i) { return ((i >= 7 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); });//轴标签是否明显显示
70 //读取csv格式数据
71 d3.csv = d3.dsv(",", "text/csv");
72 //定义heatmapChart函数，输入文件即可画图
73 var heatmapChart = function(tsvFile) {
74 d3.csv(tsvFile,function(d) {return {day: +d.day,hour: +d.hour,value: +d.value};},
75
76 function(error, data) {
77 var colorScale = d3.scale.quantile() //比例尺：与quantize类似，但输入值域是独立的值，适合已经对数据分类的情形。
78 .domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })])
79 .range(colors);
80
81 var cards = svg.selectAll(".hour")
82 .data(data, function(d) {return d.day+‘:‘+d.hour;});
83
84 cards.append("title");
85
86 cards.enter().append("rect")
87 .attr("x", function(d) { return (d.hour - 1) * gridSize; })
88 .attr("y", function(d) { return (d.day - 1) * gridSize; })
89 .attr("rx", 4)
90 .attr("ry", 4)
91 .attr("class", "hour bordered")
92 .attr("width", gridSize)
93 .attr("height", gridSize)
94 .style("fill", colors[0]);
95
96 //颜色渐变效果
97 cards.transition().duration(1000)
98 .style("fill", function(d) { return colorScale(d.value); });
99
100 cards.select("title").text(function(d) { return d.value; });
101
102 cards.exit().remove();
103
104 //添加图例
105 var legend = svg.selectAll(".legend")
106 .data([0].concat(colorScale.quantiles()), function(d) { return d; });
107
108 legend.enter().append("g")
109 .attr("class", "legend");
110
111 legend.append("rect")
112 .attr("x", function(d, i) { return legendElementWidth * i; })
113 .attr("y", height)
114 .attr("width", legendElementWidth)
115 .attr("height", gridSize / 2)
116 .style("fill", function(d, i) { return colors[i]; });
117
118 legend.append("text")
119 .attr("class", "mono")
120 .text(function(d) { return "≥ " + Math.round(d); })
121 .attr("x", function(d, i) { return legendElementWidth * i; })
122 .attr("y", height + gridSize);
123
124 legend.exit().remove();
125
126 });
127 };
128
129 //调用前面的heatmapChart函数，输入数据文件名称
130 heatmapChart(datasets[0]);
131
132 //按钮
133 var datasetpicker = d3.select("#dataset-picker").selectAll(".dataset-button")
134 .data(datasets);
135
136 datasetpicker.enter()
137 .append("input")
138 .attr("value", function(d){ return "Dataset " + d })
139 .attr("type", "button")
140 .attr("class", "dataset-button")
141 .on("click", function(d) {
142 heatmapChart(d);
143 });
144 </script>
145 </body>
146 </html>
时间： 2024-10-19 14:16:12