javascript - 用 d3 制作日历

Question

我正在尝试构建一个插件来显示谷歌日历帐户上的事件的年度 View ，我正在尝试使用 D3 构建此 View 并从谷歌日历 API 获取数据(到目前为止这部分听起来很简单) ，但我一直在尝试在 d3 中实际构建 View ，这是我到目前为止所拥有的:

我的代码:

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 年

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

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

谢谢大家，我对 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() ); } )

我认为“堆叠”数据(并排)会出现问题，但我们稍后会处理这个问题。