先来个效果图减少错进者的时间时间对于我们来说太宝贵了

** 第一次写文章不喜欢请喷我您的支持是我最大的动力 **

直接上代码重点看注释吧

<!DOCTYPE html>
<meta charset="utf-8">
<html><head><style>body {font: 1.1em sans-serif;background-color: #255;}#chart{width: 800px;margin: 0 auto;}.background {fill: #eee;}.day {fill: none;stroke: #fff;}/* hover info */#tooltip {background-color: #fff;border: 2px solid #ccc;padding: 10px;}</style></head><body><!--div容器--><div id="chart" class="clearfix"></div><script src="d3.v3.js"></script><script src="jquery.min.js" type="text/javascript"></script><script>//颜色其实就是根据该天的空气质量大小去判断 严不严重的颜色var width = 500,//画布宽度height = 500,//画布高度cellSize = 25; //一格占用大小var date = new Date();//该实例为当前时间var yearDate = 2019;//date.getYear()+1900;//当前年份var monthNo =1;//date.getMonth()+1;//当前月份 var dayDate = 12;//date.getDate();//当前月的第几天var day = d3.time.format("%w"), // day of the weekday_of_month = d3.time.format("%e") // day of the monthday_of_year = d3.time.format("%j")week = d3.time.format("%U"), // week number of the yearmonth = d3.time.format("%m"), // month numberyear = d3.time.format("%Y"),percent = d3.format(".1%"),format = d3.time.format("%Y-%m-%d");//用于将每一个日期文字 和 背景 拼接成7×6var countDay = 0;var c = 0;var countDayFun = function(i){if(i==6 && c==0){c++;}else{if(i==0){countDay++;}}};var color = d3.scale.quantize().domain([-.05, .05]).range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));//创建画布var svg = d3.select("#chart").selectAll("svg").data(d3.range(yearDate, yearDate+1)).enter().append("svg").attr("width", width).attr("height", height).append("g");//  Tooltip Objectvar tooltip = d3.select("body").append("div").attr("id", "tooltip").style("position", "absolute").style("z-index", "10").style("visibility", "hidden").text("a simple tooltip");//获取当前月的最后一天function getCurrentMonthLast(date){var currentMonth=date.getMonth();var nextMonth=++currentMonth;var nextMonthFirstDay=new Date(date.getFullYear(),nextMonth,1);var oneDay=1000*60*60*24;return new Date(nextMonthFirstDay-oneDay);}//获取当前月的第一天是周几function getCurrentOneDay(){var date=new Date(yearDate,monthNo-1);date.setDate(1);return date.getDay();}//发送请求  返回数据拼接 其实逻辑挺复杂的 拼接按实际来吧var heatmapChart = function (url) {d3.json(url,function (data) {var calendar = [];//拼接示例 var calendar = [{day:该天数是周几,hour:这个月的第几周,value:值用于获取背景指定Colors的背景色渲染}];//该拼接只提供参考 因为每个人写的返回数据都会不一样for (var i = 0; i < data.length; i++) {var datum = data[i];var timeStrs = datum.time.split('-');var date = new Date(datum.time);  if((date.getMonth()+1) == monthNo){//获取上个月的最后一天是周几var lastDay =  getCurrentMonthLast(new Date(yearDate,monthNo-2)).getDay();  //获取数据的今天本月的第几周var weekDate = Math.ceil((date.getDate()+6-date.getDay())/7);if(lastDay==6){//判断如果上个月的最后一天是周六//本月周+1  防止背景色渲染出现问题 这里是个坑 可能出现上个月的30号正好是//周六 本月1号在第二行 渲染在第一行 weekDate = Math.ceil((date.getDate()+6-date.getDay())/7)+1;}  calendar.push({day: date.getDay(),hour: weekDate,//parseInt(timeStrs[2]),value: datum.AQI});}}//拼接完成后 执行该函数drawCalendar(calendar);});};var data = [{day: 2,hour: 1,value: 132.9583},{day: 3,hour: 1,value: 183.0417},{day: 4,hour: 1,value: 212.7083},{day: 5,hour: 1,value: 213.2273},{day: 6,hour: 1,value: 75},{day: 0,hour: 2,value: 142.75},{day: 1,hour: 2,value: 254.375},{day: 2,hour: 2,value: 81.5833},{day: 3,hour: 2,value: 54.7083},{day: 4,hour: 2,value: 109.75},{day: 5,hour: 2,value: 126.0833},{day: 6,hour: 2,value: 197.4}];//==执行可测试绘制日历 此处乃重中之重了  核心代码drawCalendar(data);//该函数接收data数据function drawCalendar(data) {//背景颜色var colors =["rgba(109,204,38,1)","rgba(251,209,63,1)","rgba(252,136,35,1)","rgba(251,13,28,1)","rgba(149,12,82,1)","rgba(96,2,26,1)","rgba(13,13,13,1)"];var colorScale = function (aqi) {var result = colors[0];if (aqi >= 500) {           // '爆表'result = colors[6];} else if (aqi < 500 && aqi >= 300) { // '严重污染'  result = colors[5];} else if (aqi < 300 && aqi >= 200) { // '重度污染' result = colors[4];} else if (aqi < 200 && aqi >= 150) { // '中度污染'result = colors[3];} else if (aqi < 150 && aqi >= 100) { // '轻度污染'result = colors[2];} else if (aqi < 100 && aqi >= 50) {  // '良'result = colors[1];} else if (aqi < 50 && aqi >= 0) {    // '优'result = colors[0];}return result;};//绘制背景色countDay=1;c=0;var cards = svg.selectAll(".hour").data(data, function (d) { return d.day + ':' + d.hour; });cards.append("title");cards.enter().append("rect").attr("x", function (d) { return (d.day) * cellSize *2; })//x位置.attr("y", function (d) {                 //y位置countDayFun(d.day);return countDay * cellSize *2;}).attr("rx", 4)//背景边框圆滑度.attr("ry", 4)//背景边框圆滑度.attr("class", "hour bordered").attr("width", cellSize)//背景单格宽度.attr("height", cellSize)//背景单格高度.style("fill", colors[0]);cards.transition().duration(1000).style("fill", function (d) { return colorScale(d.value); });//return 执行value大小获取的背景颜色值cards.select("title").text(function (d) { return d.value; });cards.exit().remove();//创建天数 字 必须在背景颜色添加之后 不然会形成覆盖countDay=0,c=0;var texts = svg.selectAll("text").data(function(d) {//获取上个月最后一天是周几 var pre = getCurrentMonthLast( new Date(new Date(yearDate,monthNo-1).setMonth(new Date(yearDate,monthNo-1).getMonth()-1))).getDay();//有必要说一下 返回的类型为Date类型的数组形式 //总共返回的是本月之前的补全时间也就是7×6格的第一格到本月之后的补全时间  //只不过我获取的时间从本月之前的几天到下个月低 截取到42个时间点,正好到本月之后的几天return d3.time.days(new Date(yearDate,monthNo-1,-(pre)), new Date(d,monthNo+1,0)).slice(0,42);}).enter().append("text").attr("class", "day").attr("width", cellSize).attr("height", cellSize).attr("x", function(d) {return (day(d)) * cellSize *2 +13; }).attr("y", function(d,i) { countDayFun(day(d));return countDay*cellSize *2 +18;}).attr("text-anchor","middle").style("fill","none").style("stroke", function(d){if((d.getMonth()+1)==monthNo){//判断如果该天是本月的 文本颜色为白色 否则是蓝色的return "#fff";}else{return "#00569f";}}).text(function(d){return d.getDate();//返回文本内容 42个时间点的某一天}).style({"font-size":"15px","z-index":"999"});//这个没什么可说的 就是日期周标注而已  写死的var legend = svg.selectAll(".legend").data(["日", "一", "二", "三", "四", "五", "六"], function (d) { return d; });legend.enter().append("g").attr("class", "legend").append("text").attr("class", "mono").text(function (d) { return d; }).attr("x", function (d, i) { return cellSize * i * 2 +4; }).attr("y", cellSize).style("fill","#fff");};</script></body>
</html>

d3.js 7×6 日历绘制附加单格背景相关推荐

D3.js 使用geojson绘制地图
D3.js 使用geojson绘制地图前言初始化项目获取数据并绘图 http请求数据定义坐标并绘图总结前言利用geojson文件或者类似包含对象属性和坐标(只要坐标是在统一参考系下)的文 ...
d3.js——箭头的绘制
首先我们要明白如何在svg中进行箭头的绘制: 先写一对<defs>,里面再写一对<marker>,其中marker的属性意义为: viewBox 坐标系的区域 refX, re ...
d3.js折线图_学习使用D3.js创建折线图
d3.js折线图 by Sohaib Nehal 通过Sohaib Nehal 学习使用D3.js创建折线图 (Learn to create a line chart using D3.js) 使用 ...
D3.js + Canvas 绘制组织结构图
D3.js + Canvas 绘制组织结构图使用 D3.js 默认的 svg 渲染 D3默认的树状图画图使用的是svg, 比如这个来自D3作者的例子: https://bl.ocks.org/mbo ...
【D3.js数据可视化实战】--（3）桑基图（sankey）的绘制
什么是桑基图用D3绘制简单的Sankey图添加文字圆形节点添加交互效果注:本文未经作者允许严禁转载和演绎 1 什么是桑基图? 桑基图是流图 (flow diagram )的一种,用来描述能量 ...
D3.js绘制颜色:RGB、HSL和插值 (V3版本)
转载地址:D3.js绘制颜色:RGB.HSL和插值 (V3版本) 如果要计算介于两个颜色之间的颜色,需要用到插值(Interpolation).D3提供了d3.intrerpolateRgb()来处 ...
【 D3.js 入门系列 --- 10 】地图的绘制
地图的制作在 D3 中可以说是最重要的一环.因为在进行数据可视化时,很多情况都会和地图联系在一起,如中国各省的人口多少,GDP多少等,都可以和地图联系在一起. D3 中制作地图所需要的文件问 JSON ...
【D3.js开发入门：绘制图表】静态图表
什么是 D3.js? D3.js是用于 HTML 和 SVG 实现的 JavaScript 可视化库.基于数据操作文档的 JavaScript 库. 说到D3不得不提到Echarts,Echarts和 ...
d3js mysql_使用D3.js绘制地图并打点
本篇简单介绍一下使用D3.js绘制地图,并更具经纬度在地图打点.最后根据点生成voronoi图及其三角网. 下载地图geoJson文件去网上下载要绘制地图的geoJson文件. 使用d3.json( ...

d3.js 7×6 日历绘制附加单格背景

d3.js 7×6 日历绘制附加单格背景

先来个效果图减少错进者的时间时间对于我们来说太宝贵了

d3.js 7×6 日历绘制附加单格背景相关推荐

最新文章

热门文章

d3.js 7×6 日历绘制 附加单格背景

d3.js 7×6 日历绘制 附加单格背景

先来个效果图 减少错进者的时间 时间对于我们来说太宝贵了

d3.js 7×6 日历绘制 附加单格背景相关推荐

最新文章

热门文章

d3.js 7×6 日历绘制附加单格背景

d3.js 7×6 日历绘制附加单格背景

先来个效果图减少错进者的时间时间对于我们来说太宝贵了

d3.js 7×6 日历绘制附加单格背景相关推荐