D3JS select所有添加矩形

令我驚訝的是d3.js的簡潔性使數據可視化。在這種簡潔性下隱藏的複雜性也使得它難以理解它是如何工作的。下面是從http://mbostock.github.com/d3/ex/calendar.html D3JS select所有添加矩形

代碼的一部分問題是，它是如何創建矩形的一天，在svg創建的數量（var svg = d3 ....）。在聲明中svg.selectAll("rect.day")，我不知道它是如何追加矩形每個SVG的（全選試圖選擇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);

來源

2012-09-06 bsr

你看着Thinking With Joins？它非常清楚地解釋了數據如何聯合工作 - 實質上，在D3中，您使用.selectAll()將數據連接到選擇，然後根據需要使用.enter()附加新元素。因此，

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

基於數據根據需要創建新的rect元素。

來源

2012-09-06 23:15:15 nrabinowitz

謝謝。那篇文章解釋得很好。但是，爲什麼selectAll（「rect.day」）不是selectAll（「rect」）。當我嘗試時，它以任何方式工作。 – bsr

我想我被＃selection.selectAll（選擇器）和＃d3.selectAll（選擇器） – bsr

弄糊塗瞭如果你的vis中有其他類型的'rect'元素，'.selectAll（「rect」）'不會知道哪些要查找，並選擇所有這些，可能會刪除或修改您不想觸及的現有元素。所以在一個複雜的可視化中按照課程選擇通常是一個好主意。 – nrabinowitz

D3JS select所有添加矩形

回答

相關問題