我正在使用d3 v5创建一个三列CSV文件的数据可视化。我为轴编写的代码绘制了轴,但没有显示刻度。当我直接将整数输入到domain中时,会出现刻度,但显然domain不能从我的数据中获得最大值。我需要帮助,谢谢。
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)")
发布于 2020-04-17 21:55:15
当dataset
为空数组时,位于CSV函数之后的所有代码都在检索CSV数据之前运行。
定义轴和绘制图表的代码应该相应地移动到.then
函数中。
.then(function(data) {
dataset = data;
console.log(data);
// here
});
其他备注:x刻度当前定义为显示数据集0和最大值之间的所有年份:
.domain([0, d3.max(dataset, d => d.Year)])
假设图表将显示诺贝尔奖获得者,您可能希望图表从1901年开始(或使用数据集中的min
值)。
https://stackoverflow.com/questions/61278274
复制相似问题