I am amazed by the brevity of d3.js to visualize data. The complexity hidden under this brevity also makes it a bit hard to understand how it works. Below is part of the code from http://mbostock.github.com/d3/ex/calendar.html
The question is how it creates rect for day, within the number of svg created (var svg = d3....). In the statement svg.selectAll("rect.day")
, I am not sure how it appends rect for each of svg (selectAll trying to select rect.day !)
var margin = {top: 19, right: 20, bottom: 20, left: 19},
width = 960 - margin.right - margin.left, // width
height = 136 - margin.top - margin.bottom, // height
cellSize = 17; // cell size
var day = d3.time.format("%w"),
week = d3.time.format("%U"),
percent = d3.format(".1%"),
format = d3.time.format("%Y-%m-%d");
var svg = d3.select("#chart").selectAll("svg")
.data(d3.range(1990, 2011))
.enter().append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.attr("class", "RdYlGn")
.append("g")
.attr("transform", "translate(" + (margin.left + (width - cellSize * 53) / 2) + "," + (margin.top + (height - cellSize * 7) / 2) + ")");
var rect = svg.selectAll("rect.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);
Have you looked at Thinking With Joins ? It explains pretty clearly how data joins work - essentially, in D3, you use .selectAll()
to join data to a selection, and then use .enter()
to append new elements as necessary. So
svg.selectAll("rect.day")
.data( ... )
.enter().append("rect")
.class("day")
creates new rect
elements as necessary, based on the data.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.