1

嘿，所以我在放置堆积条形图时遇到了困难。它出现了，我只是很难宣布它是 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 但它会抛出错误。任何帮助将不胜感激。

4

1 回答 1

2

简单的答案是您的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/

于 2013-08-20T01:22:55.347 回答