用d3制作日历

Question

我正在尝试构建一个插件，以便在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("")
  )

它呈现的内容： actual view calendar

我想要实现的目标： goal calendar

我的代码存在一些问题，

• 第一个是我的y域是31天的任意月份，我不知道如果它是时间尺度我的数据是否会很好地放在图上，我应该使用线性比例31？

• 我如何才能在没有2013年和2014年的情况下呈现1月... 12月

• 如何在每行的中间顶部显示月份而不是在每个刻度上显示月份？

• 好吧，考虑到我已经要求了很多，我不会要求更多。

谢谢大家，我对d3全新，我读了很多东西。

Answer 1

我的方法（不是唯一的方法）：

对两个轴使用线性数值域。换句话说：

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() ); } )

我认为“叠加”数据（并排）会有问题，但我们稍后会处理。