D3JS selectAll for rect

Question

데이터를 시각화하기 위해 d3.js의 간결함에 놀랐습니다. 이 간결함에 숨겨진 복잡성은 또한 그것이 어떻게 작동하는지 이해하기가 약간 어렵습니다. 아래 코드의 일부입니다 http://mbostock.github.com/d3/ex/calendar.html

질문은 생성 된 svg의 수 (var svg = d3 ....) 내에서 하루 동안 rect를 만드는 방법입니다. 문 svg.selectAll("rect.day")에서, 나는 그것이 SVG 각각 RECT를 추가하는 방법을 잘 모르겠습니다 (는 selectAll는 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); 

Answer 1

당신이 Thinking With Joins 봤어? 데이터 결합 방식을 아주 명확하게 설명합니다. 기본적으로 D3에서는 .selectAll()을 사용하여 데이터를 선택 항목에 조인 한 다음 .enter()을 사용하여 필요에 따라 새 요소를 추가합니다. 따라서

svg.selectAll("rect.day") 
    .data(...) 
    .enter().append("rect") 
    .class("day") 

은 데이터를 기반으로 필요에 따라 새로운 요소를 만듭니다.