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所有添加矩形

回答

相关问题