d3.js - D3 日历热图。如何在热图的矩形中显示数字或任何内容
问题描述
所有矩形都正确定位。但我试图以矩形显示计数。我尝试了很多方法,但它不起作用。我尝试按组标签对矩形和文本标签进行分组。我得到了文本,但有些数据没有进入文本标签。我提供了一个链接以供参考[在此热图中,仅显示带有矩形的热图] [1]。我有很多解决方案,但不适用于我的代码。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#calendar {
margin: 20px;
}
.month {
margin-right: 8px;
}
.month-name {
font-size: 85%;
fill: #777;
font-family: Arial, Helvetica;
}
.day.hover {
stroke: #6d6E70;
stroke-width: 2;
}
.day.focus {
stroke: #ffff33;
stroke-width: 2;
}
</style>
<body>
<div id="calendar"></div>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>
function drawCalendar(dateData){
var weeksInMonth = function(month){
var m = d3.timeMonth.floor(month)
return d3.timeWeeks(d3.timeWeek.floor(m), d3.timeMonth.offset(m,1)).length;
}
var minDate = d3.min(dateData, function(d) { return new Date(d.day) })
var maxDate = d3.max(dateData, function(d) { return new Date(d.day) })
var cellMargin = 2,
cellSize = 20;
var day = d3.timeFormat("%w"),
week = d3.timeFormat("%U"),
format = d3.timeFormat("%Y-%m-%d"),
titleFormat = d3.utcFormat("%a, %d-%b");
monthName = d3.timeFormat("%B"),
months= d3.timeMonth.range(d3.timeMonth.floor(minDate), maxDate);
var svg = d3.select("#calendar").selectAll("svg")
.data(months)
.enter().append("svg")
.attr("class", "month")
.attr("height", ((cellSize * 7) + (cellMargin * 8) + 20) ) // the 20 is for the month labels
.attr("width", function(d) {
var columns = weeksInMonth(d);
return ((cellSize * columns) + (cellMargin * (columns + 1)));
})
.append("g")
svg.append("text")
.attr("class", "month-name")
.attr("y", (cellSize * 7) + (cellMargin * 8) + 15 )
.attr("x", function(d) {
var columns = weeksInMonth(d);
return (((cellSize * columns) + (cellMargin * (columns + 1))) / 2);
})
.attr("text-anchor", "middle")
.text(function(d) { return monthName(d); })
var rect = svg.selectAll("rect.day")
.data(function(d, i) { return d3.timeDays(d, new Date(d.getFullYear(), d.getMonth()+1, 1)); })
.enter().append("rect")
.attr("class", "day")
.attr("width", cellSize)
.attr("height", cellSize)
.attr("rx", 3).attr("ry", 3) // rounded corners
.attr("fill", '#eaeaea') // default light grey fill
.attr("y", function(d) { return (day(d) * cellSize) + (day(d) * cellMargin) + cellMargin; })
.attr("x", function(d) { return ((week(d) - week(new Date(d.getFullYear(),d.getMonth(),1))) * cellSize) + ((week(d) - week(new Date(d.getFullYear(),d.getMonth(),1))) * cellMargin) + cellMargin ; })
.on("mouseover", function(d) {
d3.select(this).classed('hover', true);
})
.on("mouseout", function(d) {
d3.select(this).classed('hover', false);
})
.datum(format);
rect.append("title")
.text(function(d) { return titleFormat(new Date(d)); });
var lookup = d3.nest()
.key(function(d) { return d.day; })
.rollup(function(leaves) {
return d3.sum(leaves, function(d){ return parseInt(d.count); });
})
.object(dateData);
var scale = d3.scaleLinear()
.domain(d3.extent(dateData, function(d) { return parseInt(d.count); }))
.range([0.4,1]); // the interpolate used for color expects a number in the range [0,1] but i don't want the lightest part of the color scheme
rect.filter(function(d) { return d in lookup; })
.style("fill", function(d) { return d3.interpolatePuBu(scale(lookup[d])); })
.select("title")
.text(function(d) { return titleFormat(new Date(d)) + ": " + lookup[d]; });
}
d3.csv("dates.csv", function(response){
drawCalendar(response);
})
</script>
这是.csv
day,count
2016-05-12,171
2016-06-17,139
2016-05-02,556
2016-04-10,1
2016-05-04,485
2016-03-27,1
2016-05-26,42
2016-05-25,337
2016-05-23,267
2016-05-05,569
2016-03-31,32
2016-03-25,128
2016-05-13,221
2016-03-30,26
2016-03-15,3
2016-04-24,10
2016-04-27,312
2016-03-20,99
2016-05-10,358
2016-04-01,15
2016-05-11,199
2016-07-06,744
2016-05-08,23
2016-03-28,98
2016-03-29,64
2016-04-30,152
2016-03-21,148
2016-03-19,20
2016-05-07,69
2016-04-29,431
2016-04-25,330
2016-04-28,353
2016-04-18,9
2016-01-10,1
2016-01-09,2
2016-03-26,21
2016-05-27,18
2016-04-19,10
2016-04-06,1
2016-04-12,214
2016-05-03,536
2016-07-03,3
2016-06-16,1
2016-03-24,138
2016-04-26,351
2016-04-23,14
2016-05-01,19
2016-07-05,523
2016-05-22,3
2016-05-09,430
2016-05-24,472
2016-04-11,172
2016-03-17,7
2016-05-14,10
2016-05-06,449
2016-07-04,295
2016-05-15,12
2016-03-23,216
2016-03-18,47
2016-03-22,179
解决方案
推荐阅读
- cmake - 如何正确使用 OBJECT_DEPENDS 指定非源依赖项?
- html - 关闭模态后视频继续播放
- java - kafka 流状态存储保存在哪里?
- refresh - Excel Power Query 数据加载太慢
- stylecop - 使用 Stylecop.Analyzer 为项目创建可自定义的规则集
- java - 继承练习
- snowflake-cloud-data-platform - 为什么两个字符串不匹配,尽管它们完全相同?
- reactjs - CoreUI React.js 管理模板 [CDataTable] 过滤嵌套对象
- stata - Coefplot 彼此相邻
- python - Flask 视图装饰器和流式内容