为什么X轴和y轴刻度线不出现在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

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

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

.then(function(data) {

    dataset = data;

    console.log(data);

   // here

});

其他说明：x刻度当前已定义为显示0到数据集最大值之间的所有年份：

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

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