【发布时间】：2014-02-27 08:34:11
【问题描述】：
任何人都可以帮我转换 d3.js 日历视图实现，它看起来像这里描述的那样（周作为列）：D3 Calendar View using Associative Array
到更像这样的东西（以周为行）：http://kamisama.github.io/cal-heatmap/v2/（请参阅月 > 天（水平）部分）
我曾尝试过玩斧头，但无济于事。
任何帮助将不胜感激。
我当前的代码如下所示：
raApp.directive('heatMapYear', function () {
var width = 1200,
height = 150,
cellSize = 17; // cell size
var day = d3.time.format("%w"),
week = d3.time.format("%U"),
month = d3.time.format("%m"),
monthName = d3.time.format("%b"),
format = d3.time.format("%Y-%m-%d");
var color = d3.scale.quantize()
.domain([1, 5])
.range(d3.range(5).map(function(d) { return "rank" + d; }));
return {
restrict: 'A'
, replace: false
, scope: {
chartData: '='
, dateField: '='
}
, link: function (scope, element, attrs) {
scope.$watch('chartData', function(newData, oldData) {
d3.select(element[0]).selectAll('*').remove();
if (newData != undefined) {
var svg = d3.select(element[0]).selectAll("svg")
.data(function() {
var years = [];
for (var i = 0; i < newData.length; i++) {
var date = newData[i][scope.dateField];
var year = parseInt(date.substring(0, 4));
if (years.indexOf(year) == -1) {
years.push(year);
}
}
return years;
})
.enter().append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "heatClass")
.append("g")
.attr("transform", "translate(" + 50 + "," + (height - cellSize * 7 - 1) + ")");
svg.append("text")
.attr("transform", "translate(-30," + cellSize * 3.5 + ")rotate(-90)")
.style("text-anchor", "middle")
.style("font-weight", "bold")
.text(function(d) { return d; });
svg.selectAll(".monthName")
.data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("text")
.attr("x", function(d) {return (week(d) * cellSize + 50); })
.attr("y", -5)
.style("text-anchor", "middle")
.text(function(d) { return monthName(d); });
svg.selectAll(".dayName")
.data(function(d) { return ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] })
.enter().append("text")
.attr("x", -10)
.attr("y", function(d, i) {return (i * cellSize) + 12; })
.style("text-anchor", "middle")
.text(function(d) { return d; });
var svg1 = d3.select(element[0]).select("svg")
var legend = svg1.selectAll(".legend")
.data([0])
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) {
return "translate(130," + (i * (cellSize) + 30) + ")";
});
legend.append("svg:image")
.attr("xlink:href", "img/RA-scale-small.png")
.attr("x", width - 350)
.attr("y", 0)
.attr("width",200)
.attr("height", 47);
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("rect")
.attr("class", "day")
.attr("width", cellSize)
.attr("height", cellSize)
.attr("x", function(d) { return week(d) * cellSize; })
.attr("y", function(d) { return day(d) * cellSize; })
.datum(format);
rect.append("title")
.text(function(d) { return d; });
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);
var data = d3.nest()
.key(function(d) { return d[scope.dateField]; })
.rollup(function(d) {return {rank:d[0]["rank"],revenue:d[0]["abbrRevenue"],volume:d[0]["abbrVolume"]}})
.map(newData);
rect.filter(function(d) { return d in data; })
.attr("class", function(d) {return "day " + color(data[d].rank); })
.select("title")
.text(function(d) { return d + "\nRevenue: " + data[d].revenue + "\nVolume: " + data[d].volume });
}
});
function monthPath(t0) {
var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
d0 = +day(t0), w0 = +week(t0),
d1 = +day(t1), w1 = +week(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";
}
}
}
});
【问题讨论】：
-
欢迎来到 StackOverflow。你试过什么吗？在这里感谢您的努力！
-
我尝试切换轴：` .attr("x", function(d) { return day(d) * cellSize; }) .attr("y", function(d) { return week(d) * cellSize; })` 然后使用月份路径，但我很难正确对齐月份路径。
标签： javascript d3.js calendar heatmap