D3.js 在堆叠条形图上正确显示x轴

嘿，所以我很难定位我的堆叠条形图。它出现了，我只是很难确定它是x轴。以下是JSFIDLE：

显然，这是问题的一部分，我拉了代码，不幸地陷入了不完全理解它的陷阱

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了，但它会抛出错误。任何帮助都将不胜感激。

简单的答案是

数据

数组中的对象没有

日期

键，因此

xTimeScale

域未定义。纠正此问题的简单方法是为每个数据项创建此键：

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

它将日期创建为

年的1月1日

变量。这基本上解决了x轴问题

但是，我建议您的数据更适合使用，因为您只有年度数据

还有几件小事：

你的X轴定义有太多的蜱虫，考虑改变这个
• 考虑为

  .axis

  元素添加css样式，以提高可读性

---

这些细微变化的更新版本位于

，非常感谢。这很有帮助，尽管只有4个在显示，而不是全部5个。我更新了x轴以显示正确的刻度。第一个元素似乎隐藏在x轴上，最后一个元素隐藏在y轴上。思想？这里的比例定义就是问题所在，如果仔细观察，您会发现2013年的条形图就在svg区域的右侧。您的缩放范围为[20092013]，每个条的左下角从当年的缩放位置开始，您可以通过删除翻译轴文本的代码轻松看到这一点。为了解决这个问题，我再次建议切换到顺序刻度，它内置了用于计算条形和间距等的功能。

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