Javascript 在D3日历可视化中插入值
需要帮助在D3日历可视化的每个单元格中显示注意值。我是D3新手，有点陷入了这一步。非常感谢您在这方面给予的帮助 用于可视化的示例日期Javascript 在D3日历可视化中插入值,javascript,d3.js,Javascript,D3.js,需要帮助在D3日历可视化的每个单元格中显示注意值。我是D3新手，有点陷入了这一步。非常感谢您在这方面给予的帮助 用于可视化的示例日期 Date Station Group Attendance Absent PTO 2010-07-19 C GH 57 10 0 2010-07-20 C EF 58 10 1 2010-09-21 A GH 6 1 1 2010-09-20 A IJ 6 1 2 2010-09-17 A
Date Station Group Attendance Absent PTO
2010-07-19 C GH 57 10 0
2010-07-20 C EF 58 10 1
2010-09-21 A GH 6 1 1
2010-09-20 A IJ 6 1 2
2010-09-17 A AB 6 1 3
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
shape-rendering: crispEdges;
}
.day {
fill: #fff;
stroke: #ccc;
}
.month {
fill: none;
stroke: #000;
stroke-width: 2px;
}
.RdYlGn .q10-11{fill:rgb(165,0,38)}
.RdYlGn .q9-11{fill:rgb(215,48,39)}
.RdYlGn .q8-11{fill:rgb(244,109,67)}
.RdYlGn .q7-11{fill:rgb(253,174,97)}
.RdYlGn .q6-11{fill:rgb(254,224,139)}
.RdYlGn .q5-11{fill:rgb(255,255,191)}
.RdYlGn .q4-11{fill:rgb(217,239,139)}
.RdYlGn .q3-11{fill:rgb(166,217,106)}
.RdYlGn .q2-11{fill:rgb(102,189,99)}
.RdYlGn .q1-11{fill:rgb(26,152,80)}
.RdYlGn .q0-11{fill:rgb(0,104,55)}
.chart rect {
fill: steelblue;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
<script>
//For Selecting Distinct Year from Date field for drop down
d3.csv("station.csv", function(error, csv) {
if (error) throw error;
var data = d3.nest()
.key(function(d) { return d.Date.split("-")[0]; })
.sortKeys(d3.descending)
.rollup(function(v) { return {
total: d3.sum(v, function(d) { return d.Attendance; })
}; })
.entries(csv);
var dropdown = d3.select('body')
.append('select')
.attr('class','select')
.attr('id','year_dropdown')
.on('change', Year_change_Del);
var options = dropdown.selectAll('option')
.data(data)
.enter()
.append('option')
.text(function (d) { return d.key; });
});
//For Selecting Distinct Year from Date field for drop down
d3.csv("station.csv", function(error, csv) {
if (error) throw error;
var data = d3.nest()
.key(function(d) { return d.Station; })
.sortKeys(d3.ascending)
.rollup(function(v) { return {
total: d3.sum(v, function(d) { return d.Attendance; })
}; })
.entries(csv);
var dropdown = d3.select('body')
.append('select')
.attr('class','select')
.attr('id','station_dropdown')
.on('change', Year_change_Del);
var options = dropdown.selectAll('option')
.data(data)
.enter()
.append('option')
.text(function (d) { return d.key; });
});
var width = 1450,
height = 190,
cellSize = 25; // cell size
var percent = d3.format(".1%"),
format = d3.time.format("%Y-%m-%d");
var color = d3.scale.quantize()
.domain([-.05, .50])
.range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));
var month = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var week_days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
function Year_change_Del(){
d3.selectAll('svg').remove();
d3.select(".day").remove();
Year_Change_Create();
};
function Year_Change_Create() {
var station_selection = d3.select('#station_dropdown').property('value');
var year_selection = eval(d3.select('#year_dropdown').property('value')),
year_start = eval(d3.select('#year_dropdown').property('value')) -2 ,
year_end = eval(d3.select('#year_dropdown').property('value')) +1 ;
//alert(year_end);
var svg = d3.select("body").selectAll("svg")
.data(d3.range(year_start, year_end).reverse())
.enter().append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "RdYlGn")
.append("g")
.attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");
svg.append("text")
.attr("transform", "translate(-45," + cellSize * 3.5 + ")rotate(-90)")
.style("text-anchor", "middle")
.text(function(d) { return d; });
for (var i=0; i<7; i++)
{
svg.append("text")
.attr("transform", "translate(-15," + cellSize*(i+1) + ")")
.style("text-anchor", "end")
.attr("dy", "-.25em")
.text(function(d) { return week_days[i]; });
}
var rect = svg.selectAll(".day")
.data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("g");
var newrect = rect.append("rect")
.attr("id",function(d) { return d.getFullYear(d) + "," + d3.time.weekOfYear(d) * cellSize + "," + d.getDay() * cellSize; })
.attr("class", "day")
.attr("width", cellSize)
.attr("height", cellSize)
.attr("x", function(d) { return d3.time.weekOfYear(d) * cellSize; })
.attr("y", function(d) { return d.getDay() * cellSize; })
.datum(format);
newrect.append("title")
.text(function(d) { return d ; });
var newrect1 = rect.append("text")
.attr("class", "day")
.attr("x", function(d) { return d3.time.weekOfYear(d) * cellSize ; })
.attr("y", function(d) { return d.getDay() * cellSize; })
.attr("dy", "15px")
.attr("dx", "5px")
.style({"font-size":"8px","z-index":"999999999"})
.style("text-anchor", "left")
.text(function(d) { return d ; });
// to add month name on top of graph - month name not getting aligned properly
var legend = svg.selectAll(".legend")
.data(month)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(" + (((i+1) * ((width -50)/12))) + ",0)"; });
legend.append("text")
.attr("class", function(d,i){ return month[i] })
.style("text-anchor", "end")
.attr("dy", "-.45em")
.text(function(d,i){ return month[i] });
svg.selectAll(".month")
.data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("path")
.attr("class", "month")
.attr("d", monthPath);
d3.csv("station.csv", function(csv) {
data = csv;
dataset = datafilter(data);
data=d3.nest()
.key(function(d) { return d.Date; })
.rollup(function(d) { return (d[0].Absent * 100) / d[0].Attendance / 100; })
.map(dataset);//console.log(JSON.stringify(data));
newrect.filter(function(d) { return d in data; })
.attr("class", function(d) { return "day " + color(data[d]); })
.select("title")
.text(function(d) { return d + ": " + percent(data[d]); });
function datafilter(d){
data = data.filter(function(d) { return d.Station == station_selection;});
return data;};
});
d3.csv("station.csv", function(csv) {
data = csv;
dataset = datafilter(data);
d3.csv("station.csv", function(csv) {
data = csv;
dataset = datafilter(data);
data=d3.nest()
.key(function(d) { return d.Date; })
.rollup(function(d) { return (d[0].Absent * 100) / d[0].Attendance / 100; })
.entries(dataset);//console.log(JSON.stringify(data));
rect.filter(function(d) { return d in data; })
.select("text")
.text(function(d) { return d + ": " + percent(data[d]); });
function datafilter(d){
data = data.filter(function(d) { return d.Station == station_selection;});
return data;};
});
function monthPath(t0) {
var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
d0 = t0.getDay(), w0 = d3.time.weekOfYear(t0),
d1 = t1.getDay(), w1 = d3.time.weekOfYear(t1);
return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize
+ "H" + w0 * cellSize + "V" + 7 * cellSize
+ "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize
+ "H" + (w1 + 1) * cellSize + "V" + 0
+ "H" + (w0 + 1) * cellSize + "Z";
}
};
var formatTime = function(input){
var dateParse = d3.time.format("%Y-%m-%d").parse;
var dateFormat = d3.time.format("%Y");
return dateFormat(dateParse(input));
};
var formatTime = function(input){
var dateParse = d3.time.format("%Y-%m-%d").parse;
var dateFormat = d3.time.format("%u");
return dateFormat(dateParse(input));
};
</Script>
谁想要带日期的d3日历 这是我创作的小提琴的一个例子
var cellSize=17，//单元格大小
宽度=单元大小*8，
高度=单元大小*9，
FirstDayOfechMonth=GetFirstDayOfechMonth（2013年）；
var day=d3.time.format（“%w”），
myday=d3.time.format（“%d”），
周=d3.time.format（“%U”），
monthName=d3.time.format（“%B”）；
百分比=d3.格式（“.1%”），
format=d3.time.format（“%Y-%m-%d”）；
var svg=d3。选择（“日历”）。选择全部（“svg”）
.数据（每个月的第一天）
.enter（）.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
//就在这里
.attr（“转换”、“平移”（+（宽度-单元大小*7-1）+）、“+（（高度-单元大小*6）/2）+”）；
svg.append（“文本”）
.attr（“转换”、“转换”（+cellSize*3.5+）、-6）”
.style（“文本锚定”、“中间”）
.text（函数（d）{return monthName（d）；}）；
var rect=svg.selectAll（“g”）
.data（函数（d）{return getDaysInMonth（d）；}）
.enter（）.append（“g”）
.attr（“类别”、“mygroup”）
//.attr（“宽度”，单元格大小）
//.attr（“高度”，单元格大小）
//.attr（“x”，函数（d）{返回日（d）*单元大小；}）
//.attr（“y”，函数（d）{return（week（d）-getFirstWeekOfMonth（d））*cellSize；}）
//.on（“mouseover”，function（）{d3.select（this.attr（“类”，“悬停”）}）
//.on（“mouseout”，function（）{d3.select（this）.style（“背景色”，“白色”）}）
//.on（“mouseout”，function（）{d3.select（this.attr（“class”），function}）
//format是一个函数-配置为使用上述指定格式的格式化程序（format=d3.time.format（“%Y-%m-%d”）；）
//datum将执行函数，为数据集中的每个项目设置数据——在这种情况下，一年中的每一天。
//.基准（格式）；
rect.append（“rect”）
.data（函数（d）{return getDaysInMonth（d）；}）
//.enter（）.append（“rect”）
.attr（“班级”、“日”）
.attr（“宽度”，单元格大小）
.attr（“高度”，单元格大小）
.attr（“x”，函数（d）{返回日（d）*单元大小；}）
.attr（“y”，函数（d）{return（week（d）-getFirstWeekOfMonth（d））*cellSize；}）
.on（“mouseover”，function（）{d3.select（this.attr（“类”，“悬停”）}）
//.on（“mouseout”，function（）{d3.select（this）.style（“背景色”，“白色”）}）
.on（“mouseout”，function（）{d3.select（this.attr（“class”），function}）
//format是一个函数-配置为使用上述指定格式的格式化程序（format=d3.time.format（“%Y-%m-%d”）；）
//datum将执行函数，为数据集中的每个项目设置数据——在这种情况下，一年中的每一天。
.基准（格式）；
rect.append（“文本”）
//.text（函数（d）{return d；}）
.text（函数（d）{return myday（d）}）
.attr（“x”，函数（d）{返回日（d）*cellSize+4；}）
.attr（“y”，函数（d）{返回（周（d）-getFirstWeekOfMonth（d））*cellSize+12；}）
直接附加（“标题”）
//悬停时，将显示一年中每天的格式化日期（标题属性）
.text（函数（d）{return d；}）；
d3.选择（self.frameElement）.style（“高度”，“2910px”）；
函数getDaysInYear（年）{
返回d3.时间.天数（新日期（年，0，1），新日期（年+1，0，1））；
}
函数GetFirstDayOfechMonth（year）{
返回d3.时间.月份（新日期（年，0，1），新日期（年+1，0，1））；
}
函数getDaysInMonth（每月第一天）{
返回d3.time.days（firstDayOfMonth，新日期（firstDayOfMonth.getFullYear（），firstDayOfMonth.getMonth（）+1,1））；
}
函数getFirstWeekOfMonth（天）{
//TODO:停止使用这个。这是浪费，因为它每个月的每一天都会被执行。
//我们每个月应该只做一次，问题是在一个月内引用数据。
//或许可以使用一个闭包-http://stackoverflow.com/questions/13076553/combining-parent-and-nested-data-with-d3-js
//此外，以下文件中的“每个”参考http://nelsonslog.wordpress.com/2011/04/03/d3-selections/
返回周（新日期（day.getFullYear（），day.getMonth（），1））；
}正文{
字体：10px无衬线；
形状渲染：边缘清晰；
}
.天{
填充：#fff；
冲程：#ccc；
}
.月{
填充：无；
行程：#000；
笔画宽度：2px；
}
#日历矩形{
填充：#ffffff；
冲程：#bbbbbb；
}
#日历矩形悬停{
填充：#f0f8ff；
} d3.csv("station.csv", function(csv) {
data = csv;
dataset = datafilter(data);
data=d3.nest()
.key(function(d) { return d.Date; })
.rollup(function(d) { return (d[0].Absent * 100) / d[0].Attendance / 100; })
.map(dataset);//console.log(JSON.stringify(data));
newrect.filter(function(d) { return d in data; })
.attr("class", function(d) { return "day " + color(data[d]); })
.select("title")
.text(function(d) { return d + ": " + percent(data[d]); });
function datafilter(d){
data = data.filter(function(d) { return d.Station == station_selection;});
return data;};
});
d3.csv("station.csv", function(csv) {
data = csv;
dataset = datafilter(data);
d3.csv("station.csv", function(csv) {
data = csv;
dataset = datafilter(data);
data=d3.nest()
.key(function(d) { return d.Date; })
.rollup(function(d) { return (d[0].Absent * 100) / d[0].Attendance / 100; })
.entries(dataset);//console.log(JSON.stringify(data));
rect.filter(function(d) { return d in data; })
.select("text")
.text(function(d) { return d + ": " + percent(data[d]); });
function datafilter(d){
data = data.filter(function(d) { return d.Station == station_selection;});
return data;};
});