6

データを視覚化するための d3.js の簡潔さに驚かされます。この簡潔さの下に複雑さが隠されているため、それがどのように機能するかを理解するのも少し難しくなっています。以下は、http://mbostock.github.com/d3/ex/calendar.htmlのコードの一部です。

問題は、作成されたsvgの数（var svg = d3 ....）内で、どのように1日の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);
4

1 に答える 1

8

Thinking With Joinsを見たことがありますか？データ結合がどのように機能するかを非常に明確に説明しています。基本的に、D3では、.selectAll()データを選択範囲に結合し、.enter()必要に応じて新しい要素を追加するために使用します。それで

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

rectデータに基づいて、必要に応じて新しい要素を作成します。

于 2012-09-06T23:15:15.980 に答える