Javascript D3比例把我的柱状图弄乱了

我正在写一个简单的条形图，它为每个数据段绘制一个rect元素。这是我的代码中不带刻度的一部分，工作正常：

const rect=svg.selectAll（“rect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“x”，（d，i）=>（i*4））
.attr（“y”，（d）=>h-d[1]/50）

但是，如果我添加y比例，我的条会翻转，如果我添加x比例，我只能看到一个条。以下是我的天平代码：

constxscale=d3.scaleLinear（）
.domain（[0，d3.max（数据集，（d）=>d[0]））
.范围（[填充，w-填充]）；
常量yScale=d3.scaleLinear（）
.domain（[0，d3.max（数据集，（d）=>d[1]））
.范围（[h-填充，填充]）；
//其他代码
const rect=svg.selectAll（“rect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“x”，（d，i）=>xScale（i*4））
.attr（“y”，（d）=>yScale（d[1]/50））

这是我的带刻度的代码笔，它看起来是这样的：

---

如果有人告诉我我做错了什么，我会非常感激的

D3标度不会影响你的图表。这里的问题很简单

现在，这是您的数据集：

[["1947-01-01", 243.1], ...]

如您所见，

d[0]

是一个字符串（表示日期），而不是一个数字。在d3.scaleLinear中，域是一个只有两个值的数组

这里的解决方案是使用

缩放带

：

const xScale = d3.scaleBand()
    .domain(dataset.map(d => d[0]))
    .range([padding, w - padding]);

并将矩形的代码更改为实际使用刻度（我做了一些更改，检查它们）：

---

这是您更新后的代码笔：

如果您希望您的X轴代表时间，您应该使用

scaleTime

而不是

scaleLinear

。非常感谢！我被天平弄糊涂了，但现在我想我知道如何更好地使用它们了。

const rect = svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("width", xScale.bandwidth())
    .attr("x", (d => xScale(d[0]))) //xScale
    .attr("height", (d => h - yScale(d[1]))) //yScale
    .style("y", (d => yScale(d[1])))
    .attr("data-date", (d) => d[0])
    .attr("data-gdp", (d) => d[1])
    .attr("class", 'bar')