Javascript D3 Rect元素不显示

我正在尝试使用D3版本4.x.x建立一个简单的条形图，但是，我相信我做的一切都是正确的，但是似乎无法显示矩形。我附加了一个密码笔来查看这个

由于我是D3新手，因此提前感谢您提出的任何noob问题。

---

}))

您使用的是X轴的日期，因此最好使用时间刻度，而不是

scaleLinear

const xScale = d3.scaleTime()
    .domain(d3.extent(chartData, function(d) { return new Date(d[0]); }))
    .range([padding, width - padding]);

---

Codepen:

您可以将x值作为表示日期的字符串，但您没有尝试将其视为日期。您当前的

scale

代码希望它们是数字。因此，您需要决定将它们创建为字符串或日期。例如，强迫他们约会会是这样的

// a time parser
var tF = d3.timeParse("%Y-%m-%d");
// convert to dates
chartData.forEach(function(d){
  d[0] = tF(d[0])
});

...

//Define xScale as a time scale
const xScale = d3.scaleTime()
  .domain([0, d3.max(chartData, (d) => d[0])])
...

---

更新。

非常感谢。这解决了我的问题。这很有道理。

// a time parser
var tF = d3.timeParse("%Y-%m-%d");
// convert to dates
chartData.forEach(function(d){
  d[0] = tF(d[0])
});

...

//Define xScale as a time scale
const xScale = d3.scaleTime()
  .domain([0, d3.max(chartData, (d) => d[0])])
...