首页 > 代码库 > （一）色阶图

（一）色阶图

2024-08-16 21:48:42   219人阅读

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>
View Code

 

   

（一）色阶图


联系
我们