用d3.js+svg绘制房间人数热力图

最新推荐文章于 2025-03-02 12:00:02 发布

littleZhuHui

最新推荐文章于 2025-03-02 12:00:02 发布

阅读量3.3k

点赞数

分类专栏：前端开发文章标签： d3.js svg 房间人数热力图

本文链接：https://blog.youkuaiyun.com/littlezhuhui/article/details/96423673

版权

根据数据表格绘制热力图是d3.js的拿手好戏。

本文用存放在csv文件中的表格数据，绘制各个房间内人数的热力图

图形效果如下：
在这里插入图片描述
数据文件内容：
personNumber.csv

name,room1,room2,room3,room4,room5,room6,room7,room8,room9,room10,room11,room12,room13,room14,room15,room16,room17,room18,room19,room20
楼层1,9,39,30,11,22,0,8,10,1,1,4,0,1,4,5,8,2,1,3,2
楼层2,81,38,28,10,20,0,7,9,1,2,5,0,1,6,8,7,2,1,3,2
楼层3,2,36,27,10,21,0,6,7,1,1,4,0,1,4,5,5,2,1,3,2
楼层4,1,38,26,10,20,0,6,7,1,1,2,0,1,7,8,2,1,1,2,2
楼层5,6,36,26,9,19,0,6,7,1,3,7,0,1,4,5,3,1,1,3,3
楼层6,74,39,25,9,19,0,6,7,1,1,3,0,1,6,7,3,1,1,3,2

html文件内容
index.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <title>房间人数热力图</title>
    <style>
      rect.bordered {
    
        stroke: #A1A1A1;
        stroke-width:1px;  
      }

      text.mono {
    
        font-size: 6pt;
        font-family: Consolas, courier;
        fill: #000;
      }

      text.axis-workweek {
    
        fill: #00FF;
      }

      text.axis-worktime {
    
        fill: #ff00;
      }
    </style>
    
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  

  </head>
  
  
  <body>

    <div id="roomHeatMap"></div>      
   
    <script type="text/javascript">
    
      // 定义Heatmap的位置、宽高、房间格子的边长等等与布局有关的变量
      var margin = {
     top: 50, right: 0, bottom: 100, left: 150 },
          
          width = 1300 - margin.left - margin.right,        // Heatmap的宽度
          height = 600 - margin.top - margin.bottom,
          
          gridSize = Math.floor(width / 20),    // 房间格子大小，即去掉小数部分，width分成20份
          gridInnerSize=gridSize-10,

          legendElementWidth = gridSize * 2,    // 下部图例格子的长度，是房间格子边长的两倍
          
          buckets = 9,        // 一共9种颜色级别
          colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"], 
          
          rooms = ["房间1","房间2","房间3","房间4","房间5","房间6","房间7","房间8","房间9","房间10","房间11","房间12","房间13",

最低0.47元/天解锁文章