Javascript 用d3制作日历

我正在尝试构建一个插件来显示谷歌日历帐户上事件的年度视图，我正在尝试使用D3构建此视图，并从谷歌日历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("")
  )

它所呈现的内容：

我想要达到的目标：

我的代码有一些问题

• 首先，我的y域是一个31天的任意月份，我不知道我的数据是否会在图表上显示出来。如果它是一个时间尺度，我应该使用31的线性尺度吗

• 如果没有2013年和2014年，我怎么能渲染1月…12月

＞P>我如何在每个行的中间顶部显示月份，而不是在每一个记号上显示它们？
• 好吧，我不会要求更多，因为我已经要求很多了

谢谢大家，我对d3一无所知，我已经读了很多图坦卡门的书。

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

对两个轴使用线性数值域。换言之：

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

至于这些值的对齐，这说明了这是一个非常重要的问题。您最好手动调整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() ); } )

---

我想，“堆叠”数据（并排）会有问题，但我们稍后会处理这个问题。

两个图像链接都断开了