1

我正在尝试构建一个插件来显示谷歌日历帐户上事件的年度视图，我正在尝试使用 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 年，我怎么能只渲染一月...十二月

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

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

谢谢大家，我对d3完全陌生，我已经阅读了很多tuts tho。

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 回答