为什么 Xaxis 和 YAXIS 刻度不出现在 D3 的轴上？

Question

我使用d3 v5创建三列CSV文件的数据可视化。我为轴编写的代码绘制了轴，但记号没有出现。当我直接将整数输入到域中时，会出现勾号，但显然域并没有从我的数据中获得最大值。我需要帮助。

var dataset = [];
var w = 1000;
var h = 600;
var padding = 30;

d3.csv("nobel-prize.csv", d3.autoType(), function(d) {
return {
Year: +d.Year,
Women: +d.Women,
Men: +d.Men
};
}).then(function(data) {
dataset = data;
console.log(data);

});
var xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, d => d.Year)])
.range([padding, w - padding * 2])
.nice();

var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, d => d.Men)])
.range([h - padding, padding])
.nice();

var xAxis = d3.axisBottom()
.scale(xScale)
var yAxis = d3.axisLeft()
.scale(yScale)

var svg = d3.select("svg")
.attr("width", w)
.attr("height", h);
svg.append("g")
.call(xAxis)
.attr("class", "axis")
.attr("transform", "translate(0, " + (h - padding) + ")")

svg.append("g")
.call(yAxis)
.attr("class", "axis")
.attr("transform", "translate(" + padding + ", 0)")

Answer 1

在检索CSV数据之前，位于.then函数之后的所有代码都在运行，因此当dataset是空数组时。

定义轴和绘制图表的代码应在.then函数内相应移动。

.then(function(data) {
dataset = data;
console.log(data);
// here
});

其他备注：x标度目前被定义为显示数据集的0和最大值之间的所有年份：

.domain([0, d3.max(dataset, d => d.Year)])

假设图表将显示诺贝尔奖获得者，您可能希望图表从1901年开始(或使用数据集中的min值(。