3

d3 を使用して、カレンダーの例の修正版を含むビジュアライゼーションを作成しています: http://mbostock.github.com/d3/ex/calendar.html。

ここに画像の説明を入力

monthpath 関数を変更して、カレンダーを 90 度回転させました。

function monthPath(t0) {
  var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
      d0 = +day(t0), w0 = +week(t0),
      d1 = +day(t1), w1 = +week(t1);
  return "M" + (d0) * z + "," + (w0 + 1) * z
      + "V" + w0 * z 
      + "H" + 7 * z
      + "V" + w1 * z 
      + "H" + (d1 + 1) * z
      + "V" + (w1 + 1) * z 
      + "H" + 0
      + "V" + (w0 + 1) * z 
      + "Z";
}

各 monthpath 行の開始時に、カレンダーの横に月にラベルを付けたいと思います。そこで、月の変数を定義することから始めました。

month = d3.time.format("%b"),

私はおそらく間違っていますが、月の変数を monthpath 関数に挿入してラベルを印刷できると仮定していますか? Nathan Yau のカレンダーに似たカレンダーを作成しようとしています: http://flowingdata.com/2012/01/11/vehicles-involved-in-fatal-crashes/

ここに画像の説明を入力

何か案は？

ありがとう

4

1 に答える 1

4

svg.selectAll("path.month")元の例のブロックの後に挿入します。

    var month_name = d3.time.format("%B")

svg.selectAll("text.month")
    .data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
  .enter().append("text")
    .attr("class", "month")
    .attr("x", function(d) { return week(d) * cellSize; })
    .attr("y", 8 * cellSize)
    .text(month_name);

また、マージンを変更して、ラベル用のスペースを確保する必要があります。

var margin = {top: 19, right: 20, bottom: 40, left: 19},
    width = 960 - margin.right - margin.left, // width
    height = 156 - margin.top - margin.bottom, // height
    cellSize = 17; // cell size
于 2012-10-18T23:35:02.820 に答える