需要帮助显示D3 Calender可视化的每个单元格中的注意力值。我是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 AB 6 1 3
HTML页面
<!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.csv创建图表并进行着色甚至工具提示正常工作。我试图从第二个D3.csv中将数据插入到每个单元格中。但这不起作用。有人可以指导我。
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;};
});
答案 0 :(得分：0)
谁想要带日期的d3日历？
这是我创造的一个小提琴。
var cellSize = 17, // cell size
width = cellSize * 8,
height = cellSize * 9,
firstDayOfEachMonth = getFirstDayOfEachMonth(2013);
var day = d3.time.format("%w"),
myday = d3.time.format("%d"),
week = d3.time.format("%U"),
monthName = d3.time.format("%B");
percent = d3.format(".1%"),
format = d3.time.format("%Y-%m-%d");
var svg = d3.select("#calendars").selectAll("svg")
.data(firstDayOfEachMonth)
.enter().append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
// Just centering the month here
.attr("transform", "translate(" + (width - cellSize * 7 - 1) + "," + ((height - cellSize * 6) / 2) + ")");
svg.append("text")
.attr("transform", "translate(" + cellSize * 3.5 + ", -6)")
.style("text-anchor", "middle")
.text(function(d) { return monthName(d); });
var rect = svg.selectAll("g")
.data(function(d) { return getDaysInMonth(d); })
.enter().append("g")
.attr("class", "mygroup")
//.attr("width", cellSize)
//.attr("height", cellSize)
//.attr("x", function(d) { return day(d) * cellSize; })
//.attr("y", function(d) { return (week(d) - getFirstWeekOfMonth(d)) * cellSize; })
//.on("mouseover", function(){d3.select(this).attr("class", "hovered")})
//.on("mouseout", function(){d3.select(this).style("background-color", "white")})
//.on("mouseout", function(){d3.select(this).attr("class", "")})
// format is a function - a formatter configured to use the format specified above (format = d3.time.format("%Y-%m-%d");)
// datum will execute the function to set the data for each item in the dataset - in this case, every day in the year.
//.datum(format);
rect.append("rect")
.data(function(d) { return getDaysInMonth(d); })
//.enter().append("rect")
.attr("class", "day")
.attr("width", cellSize)
.attr("height", cellSize)
.attr("x", function(d) { return day(d) * cellSize; })
.attr("y", function(d) { return (week(d) - getFirstWeekOfMonth(d)) * cellSize; })
.on("mouseover", function(){d3.select(this).attr("class", "hovered")})
//.on("mouseout", function(){d3.select(this).style("background-color", "white")})
.on("mouseout", function(){d3.select(this).attr("class", "")})
// format is a function - a formatter configured to use the format specified above (format = d3.time.format("%Y-%m-%d");)
// datum will execute the function to set the data for each item in the dataset - in this case, every day in the year.
.datum(format);
rect.append("text")
//.text(function(d) { return d; })
.text(function(d) { return myday(d)})
.attr("x", function(d) { return day(d) * cellSize + 4; })
.attr("y", function(d) { return (week(d) - getFirstWeekOfMonth(d)) * cellSize + 12; })
rect.append("title")
// This will display the formatted date for each day in the year when hovered (title attribute)
.text(function(d) { return d; });
d3.select(self.frameElement).style("height", "2910px");
function getDaysInYear(year) {
return d3.time.days(new Date(year, 0, 1), new Date(year + 1, 0, 1));
}
function getFirstDayOfEachMonth(year) {
return d3.time.months(new Date(year, 0, 1), new Date(year + 1, 0, 1));
}
function getDaysInMonth(firstDayOfMonth) {
return d3.time.days(firstDayOfMonth, new Date(firstDayOfMonth.getFullYear(), firstDayOfMonth.getMonth() + 1, 1));
}
function getFirstWeekOfMonth(day) {
// TODO: stop using this. It's wasteful because it gets executed for every day of every month.
// We should only do this once per month. The problem is with referencing data throughout a month.
// Perhaps use a closure - http://stackoverflow.com/questions/13076553/combining-parent-and-nested-data-with-d3-js
// also, the "each" reference in - http://nelsonslog.wordpress.com/2011/04/03/d3-selections/
return week(new Date(day.getFullYear(), day.getMonth(), 1));
}body {
font: 10px sans-serif;
shape-rendering: crispEdges;
}
.day {
fill: #fff;
stroke: #ccc;
}
.month {
fill: none;
stroke: #000;
stroke-width: 2px;
}
#calendars rect {
fill: #ffffff;
stroke: #bbbbbb;
}
#calendars rect.hovered {
fill: #f0f8ff;
}<div id="calendars"></div>