D3JS选择所有元素并添加矩形

Question

我对d3.js以简洁的方式可视化数据感到惊讶。这种简洁下隐藏的复杂性也使得理解它的工作原理有点困难。以下是来自http://mbostock.github.com/d3/ex/calendar.html的部分代码。

问题是它如何在创建的svg数量内为每一天创建矩形（var svg = d3....）。在语句svg.selectAll("rect.day")中，我不确定它如何为每个svg附加矩形（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);

- bsr

Answer 1

你看过《使用连接进行思考》吗？它很清楚地解释了数据连接的工作原理 - 在D3中，您使用.selectAll（）将数据与选择集连接，然后使用.enter（）根据需要添加新元素。因此，

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

根据数据，如有必要，创建新的rect元素。

- nrabinowitz

---

谢谢。那篇文章解释得很好。但是，为什么要选择selectAll("rect.day")而不是selectAll("rect")？当我尝试时，两种方式都可以工作。 - bsr

我觉得我被 # selection.selectAll(selector) 和 # d3.selectAll(selector) 搞混了。 - bsr

如果您的可视化中有其他类型的“rect”元素，“.selectAll（”rect“）”将不知道要查找哪些元素，并且可能会选择所有这些元素，从而删除或修改您不想触摸的现有元素。因此，在复杂的可视化中，按类别选择通常是一个好主意。 - nrabinowitz