D3.js 热图不工作的D3填充过渡

我正在尝试创建Mike Bostock的日历视图（）的修改版本，它只显示几个月

我就快到了，但我想在单个单元格被填满时添加一个简短的过渡。我试图创建这个，但它没有转换。我一定错过了什么明显的东西。有什么想法吗？谢谢

以下是脚本（请参见“.transition（）.duration（1000）”行）：

---

你需要从它们填充一些东西开始，这样它们就可以转换成不同的颜色。像这样：

d3.selectAll("rect")
  .filter(function(d) {
    return d in data;
  })
  // start as white
  .style("fill", "white")
  .transition()
  .duration(1000)
  // fill to blue
  .style("fill", function(d) {
    return color(data[d]);
  });

---

运行代码：

可变宽度=550，
高度=750，
细胞大小=45；
var formatPercent=d3.format（“.1%”）；
var color=d3.scaleQuantize（）
.domain（[01100]）
.范围（[“#ffffff”、“#e6f7ff”、“#b3e6ff”、“#99ddff”、“#66ccff”、“#4dc3ff”、“#1ab2ff”、“#0077b3”、“#004466”）；
var month_string=[“一月”、“二月”、“三月”]
var svg=d3.选择（“主体”）
.selectAll（“svg”）
.数据（[2018]）
.enter（）.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“转换”、“平移”（+（（宽度-单元大小*5）/2）+）、“+（高度-单元大小*16-1）+”）；
svg.append（“文本”）
.attr（“变换”、“平移（-10，+cellSize*3+”）旋转（-90）”）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，20）
.attr（“文本锚定”、“中间”）
.text（月份字符串[0]）；
svg.append（“文本”）
.attr（“变换”、“平移（-10，+cellSize*7+”）旋转（-90）”）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，20）
.attr（“文本锚定”、“中间”）
.text（月份字符串[1]）；
svg.append（“文本”）
.attr（“变换”、“平移（-10，+cellSize*11+”）旋转（-90）”）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，20）
.attr（“文本锚定”、“中间”）
.text（月份字符串[2]）；
var rect=svg.append（“g”）
.attr（“填充”、“无”）
.attr（“笔划”，“#d2d48”）
.selectAll（“rect”）
.data（函数（d）{返回d3.timeDays（新日期（2018,0,1），新日期（2018,3,1））；}
.enter（）.append（“rect”）
.attr（“宽度”，单元格大小）
.attr（“高度”，单元格大小）
.attr（“类”、“小时边界”）
.attr（“rx”，4）
.attr（“ry”，4）
//.attr（“x”，函数（d）{返回d3.timeWeek.count（d3.timeYear（d），d）*cellSize；}）
//.attr（“y”，函数（d）{return d.getDay（）*cellSize；}）
.attr（“x”，函数（d）{return d.getDay（）*cellSize；}）
.attr（“y”，函数（d）{返回d3.timeWeek.count（d3.timeYear（d），d）*cellSize；}）
.基准（d3.时间格式（“%Y-%m-%d”）；
var g=svg.append（“g”）
.attr（“填充”、“无”）
.attr（“笔划”，“#d2d48”）
.全选（“g”）
.数据（功能（d）{
返回d3.时间天数（新日期（2018,0,1），新日期（2018,3,1））；
})
.输入（）
.附加（“g”）
.attr（“转换”，函数（d）{
var x=d.getDay（）*单元格大小，
y=d3.时间周.计数（d3.时间年（d），d）*单元大小；
返回“translate”（“+x+”，“+y+”）；
})
g、 附加（“rect”）
.attr（“宽度”，单元格大小）
.attr（“高度”，单元格大小）
.attr（“类”、“小时边界”）
.attr（“rx”，4）
.attr（“ry”，4）
.基准（d3.时间格式（“%Y-%m-%d”）；
g、 附加（“文本”）
.文本（功能（d）{
返回d.getDate（）；
})
.attr（“y”，单元大小-32）
.style（“字体系列”、“arial”）
.style（“字体大小”，“9pt”）
.attr（“笔划”、“黑色”）
svg.append（“g”）
.attr（“填充”、“无”）
.attr（“笔划”，“千”）
.selectAll（“路径”）
.数据（功能（d）{
返回d3.时间月（新日期（2018,0,1），新日期（2018,3,1））；
})
.enter（）.append（“路径”）
.attr（“d”，路径月）；
//d3.csv（“test.csv”，函数（错误，csv）{
var csv=[{“日期”：“2018-01-01”，“工作日”：“0”，“开放”：“1”，“关闭”：“0”}，{“日期”：“2018-01-02”，“工作日”：“1”，“开放”：“1”，“关闭”：“1”；“日期”：“2018-01-03”，“工作日”：“2”，“开放”：“1”，“关闭”：“2”；{“日期”：“2018-01-04”，“工作日”：“3”，“开放”：“1”，“关闭”：“3”；“日期”：“2018-01-05”，“工作日”：“4”，“开放”：“4”，“开放”：“2018-01-06”，“工作日”：“1”，“关闭”：“1”，“关闭”：“日期”：“2018-01-07”，“工作日”：“6”，“开放”：“1”，“关闭”：“1”，“日期”：“2018-01-08”，“工作日”：“0”，“开放”：“1”，“关闭”：“7”；“日期”：“2018-01-09”，“工作日”：“1”，“开放”：“1”，“关闭”：“8”；“日期”：“2018-01-10”，“工作日”：“2”，“开放”：“1”，“关闭”：“9”；“日期”：“2018-01-11”，“工作日”：“3”，“开放”：“10”，“关闭”：“工作日”：“2018-01”，“工作日”：开盘日期：2018-01-13开盘日期：2018-01-13开盘日期：2018-01-14开盘日期：2018-01-14开盘日期：6开盘日期：2018-01-17开盘日期：2018-01-15开盘日期：0开盘日期：2018-01-16开盘日期工作日“：”3“，”开放“：”1“，”关闭“：”17“，”日期“：”2018-01-19“，”工作日“，”4“，”开放“：”1“，”关闭“，”18“，”日期“，”2018-01-20“，”工作日“，”5“，”开放“：”1“，”日期“：”2018-01-21“，”工作日“，”6“，”开放“，”1“，”关闭“，”1“，”日期“，”2018-01-22“，”工作日“，”0“，”开放“，”1“，”关闭“，”21“，”工作日“，”开放“，”1“，”关闭“，”日期“，”2018-01-24，“工作日”：“2”、“开放日”：“1”、“关闭日”：“23”{“日期”：“2018-01-25”、“工作日”：“3”、“开放日”：“1”、“关闭日”：“24”{“日期”：“2018-01-26”、“工作日”：“4”、“开放日”：“1”、“关闭日”：“25”{“日期”：“2018-01-27”、“工作日”：“5”、“开放日”：“1”、“关闭日”：“1”、“关闭日”：“2018-01-28”、“工作日”：“6”、“开放日”：“1”、“关闭日”：“1”、“开放日”：“1”、“开放日”：“1”、“开放日”：“28”、“关闭日”：，{“日期”：“2018-01-30”，“工作日”：“1”，“开放”：“1”，“关闭”：“29”}，{“日期”：“2018-01-31”，“工作日”：“2”，“开放”：“1”，“关闭”：“30”}，{“日期”：“2018-02-01”，“工作日”：“3”，“开放”：“1”，“关闭”：“31”}，{“日期”：“2018-02-02”，“工作日”：“4”，“开放”：“1”，“关闭”：“32”}，{“日期”：“2018-02-03”，“工作日”：“5”，“开放”：“1”，“关闭”：“1”，“开放”：“2018-02”，“工作日”：关闭“：”1“}，{”日期“：”2018-02-05“，”工作日“：”0“，”打开“：”
Date,Weekday,Open,Close
2018-01-01,0,1,0
2018-01-02,1,1,1
2018-01-03,2,1,2
2018-01-04,3,1,3
2018-01-05,4,1,4
2018-01-06,5,1,1
2018-01-07,6,1,1
2018-01-08,0,1,7
2018-01-09,1,1,8
2018-01-10,2,1,9
2018-01-11,3,1,10
2018-01-12,4,1,11
2018-01-13,5,1,1
2018-01-14,6,1,1
2018-01-15,0,1,14
2018-01-16,1,1,15
2018-01-17,2,1,16
2018-01-18,3,1,17
2018-01-19,4,1,18
2018-01-20,5,1,1
2018-01-21,6,1,1
2018-01-22,0,1,21
2018-01-23,1,1,22
2018-01-24,2,1,23
2018-01-25,3,1,24
2018-01-26,4,1,25
2018-01-27,5,1,1
2018-01-28,6,1,1
2018-01-29,0,1,28
2018-01-30,1,1,29
2018-01-31,2,1,30
2018-02-01,3,1,31
2018-02-02,4,1,32
2018-02-03,5,1,1
2018-02-04,6,1,1
2018-02-05,0,1,35
2018-02-06,1,1,36
2018-02-07,2,1,37
2018-02-08,3,1,38
2018-02-09,4,1,39
2018-02-10,5,1,1
2018-02-11,6,1,1
2018-02-12,0,1,42
2018-02-13,1,1,43
2018-02-14,2,1,44
2018-02-15,3,1,45
2018-02-16,4,1,46
2018-02-17,5,1,1
2018-02-18,6,1,1
2018-02-19,0,1,49
2018-02-20,1,1,50
2018-02-21,2,1,51
2018-02-22,3,1,52
2018-02-23,4,1,53
2018-02-24,5,1,1
2018-02-25,6,1,1
2018-02-26,0,1,56
2018-02-27,1,1,57
2018-02-28,2,1,58
2018-03-01,3,1,59
2018-03-02,4,1,60
2018-03-03,5,1,1
2018-03-04,6,1,1
2018-03-05,0,1,63
2018-03-06,1,1,64
2018-03-07,2,1,65
2018-03-08,3,1,66
2018-03-09,4,1,67
2018-03-10,5,1,1
2018-03-11,6,1,1
2018-03-12,0,1,70
2018-03-13,1,1,71
2018-03-14,2,1,72
2018-03-15,3,1,73
2018-03-16,4,1,74
2018-03-17,5,1,1
2018-03-18,6,1,1
2018-03-19,0,1,77
2018-03-20,1,1,78
2018-03-21,2,1,79
2018-03-22,3,1,80
2018-03-23,4,1,81
2018-03-24,5,1,1
2018-03-25,6,1,1
2018-03-26,0,1,84
2018-03-27,1,1,85
2018-03-28,2,1,86
2018-03-29,3,1,87
2018-03-30,4,1,88
2018-03-31,5,1,1

d3.selectAll("rect")
  .filter(function(d) {
    return d in data;
  })
  // start as white
  .style("fill", "white")
  .transition()
  .duration(1000)
  // fill to blue
  .style("fill", function(d) {
    return color(data[d]);
  });