1

Googleカレンダーアカウントでイベントの年ビューを表示するプラグインを作成しようとしています。D3を使用してこのビューを作成し、GoogleカレンダーAPIからデータを取得しようとしています（この部分はこれまでのところ簡単に聞こえます）が、 d3で実際にビューを作成しようとして立ち往生しています。これまでのところ、次のようになっています。

私のコード：

var margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = 960,
    height = 500;

var x = d3.time.scale()
.domain([new Date(2013, 0, 1), new Date(2014, 0, 1)])
.range([0, width])

var y = d3.time.scale()
.domain([new Date(2013,0,1), new Date(2013, 0,31)])
.range([0, height])

var xAxis = d3.svg.axis()
.scale(x)
.orient("top")

var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(d3.time.days, 1)
.tickFormat(d3.time.format('%e'))

 var svg = d3.select(".container").append("svg")
 .attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
 .append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

function makeXaxis() {
return d3.svg.axis()
.scale(x)
.orient("top")
}

function makeYaxis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(d3.time.days, 1)
.tickFormat(d3.time.format('%e'))
 }

 svg.append("g")
  .attr("class", "x axis")
  // .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0,0)")
.call(yAxis);

 svg.append("g")
 .attr("class", "grid")
.call(makeYaxis()
  .tickSize(-width, 0, 0)
  .tickFormat("")
  .tickPadding(8)
  )

svg.append("g")
.attr("class", "grid")
.call(makeXaxis()
  .tickSize(-height, 0, 0)
  .tickFormat("")
  )

レンダリング内容： 実際のビューカレンダー

ここに画像の説明を入力してください

私が達成したいこと： 目標カレンダー

ここに画像の説明を入力してください

私のコードにはいくつか問題がありますが、

  • 1つ目は、yドメインが31日の任意の月であるということです。これが時間スケールである場合、データがグラフに適切に配置されるかどうかわかりません。31の線形スケールを使用する必要がありますか？

  • 2013年と2014年なしで1月...12月をレンダリングするにはどうすればよいですか？

  • 目盛りごとに月を表示するのではなく、各行の中央上部に月を表示するにはどうすればよいですか？

  • まあ、私はすでにたくさんを求めていることを考えると、これ以上求めるつもりはありません。

みんなありがとう、私はd3に全く慣​​れていません、私はたくさんのtutsthoを読みました。

4

1 に答える 1

0

私のアプローチ（唯一の方法ではありません）：

両方の軸に線形数値領域を使用します。言い換えると：

x.domain( [0, 11] );    // months, zero-indexed
y.domain( [1, 31] );    // days of month

月を適切にレンダリングするには、次のような奇妙なことを行う必要があります。

var monthFormatter = d3.time.format( "%B" );  // %B = Month name
function makeYaxis() {
    return d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat( function(d) { return monthFormatter( d.date ) } )
 }

これらの値の調整については、このhttps://groups.google.com/forum/?fromgroups=#!topic/d3-js/1gCrn0taKw8で、重要な問題について説明しています。x値を手動で調整するのが最善かもしれません。

画面にデータをレンダリングするために使用されるコードは表示されませんが、次のようなものを使用できます。

svg.selectAll( rect ).data( myData ).append( "rect" )
  .attr( "x", function(d) { return x( d.date.getMonth() ); } )
  .attr( "y", function(d) { return x( d.date.getDate() ); } )

データを（並べて）「スタック」するのは問題があると思いますが、後で扱います。

于 2013-01-30T14:48:30.423 に答える