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/

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

1 个答案: