在堆积条形图上正确显示 x 轴

Question

嘿，我在放置堆积条形图时遇到了困难。它出现了，我只是很难宣布它是 x 轴。这是jsfiddle：http://jsfiddle.net/E2HST/

var xTimeScale = d3.time.scale().
domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 1].date), 1)])
.range([0, width]);

显然是问题的一部分，我提取了代码，不幸陷入了没有完全理解它的陷阱。

var bars = svg.selectAll(".bar")
  .data(data).enter()
  .append("g")
  .attr("class","bar")
  .attr("transform", function(d){
        return "translate("+xTimeScale(d.date)+",0)"
})

我尝试将 d.year 换成 d.date ，因为没有更多的 d.date 但它会抛出错误。任何帮助将不胜感激。

Answer 1

简单的答案是data 数组中的对象没有date 键，因此您的xTimeScale 域未定义。更正此问题的一种简单方法是为每个数据项创建此密钥：

data.forEach( function(d) { d.date = new Date(d.year, 0, 1); });

这会将日期创建为 year 变量的 1 月 1 日。这基本上解决了您的 x 轴问题。

不过，我建议您的数据更适合使用 ordinal scale，因为您只有年度数据。

其他几件小事：

• 您的 x 轴定义的刻度太多，请考虑更改此设置
• 考虑为 .axis 元素添加 css 样式，以提高可读性

这些细微变化的更新小提琴位于http://jsfiddle.net/E2HST/1/