我正在使用d3js v3.x来可视化销售数据 . 我已经清理了SQL Server数据库中的数据,并确保字段“OrderDate”在数据库中的类型为Date . 然后我将数据导出到csv . 我试图通过使用d3js制作一个点图表来显示每年的总销售额 . 但是当我将OrderDate解析为日期格式时,通过检查console.table(data)它变为全为null . 我不知道为什么format.parse()会为这些值返回null . 这是我的功能:
function draw(data){
"use strict";
var margin = 75,
width = 1400-margin,
height = 600 - margin;
var radius = 5;
var color = 'red';
d3.select("body")
.append("h2")
.text("Sales per Year")
.attr("class", "chart-header");
var svg = d3.select("body")
.append("svg")
.attr("width", width+margin)
.attr("height", height+margin)
.append("g")
.attr('class', 'chart');
d3.select('svg')
.selectAll('circle')
.data(data)
.enter()
.append('circle');
var time_extent = d3.extent(data, function(d) {
// debugger;
return d['OrderDate'];
});
var totalSale_extent = d3.extent(data, function(d){
return d['totalSale'];
});
var time_scale = d3.time.scale()
.domain(time_extent)
.range([margin, width]);
var totalSale_scale = d3.scale.linear()
.domain(totalSale_extent)
.range([height, margin]);
var time_axis = d3.svg.axis()
.scale(time_scale);
var totalSale_axis = d3.svg.axis()
.scale(totalSale_scale)
.orient("left");
d3.select('svg')
.append('g')
.attr('transform', 'translate(0,'+height+')')
.call(time_axis);
d3.select('svg')
.append('g')
.attr('transform', 'translate('+margin+',0)')
.call(totalSale_axis);
d3.selectAll('circle')
.attr('cx', function(d){
return time_scale(d['OrderDate']);
})
.attr('cy', function(d){
return totalSale_scale(d['totalSale']);
})
.attr('r', radius)
.attr('fill', color);
debugger;
};
当我在body中调用draw()函数,并在time_extent中放置一个调试器时,我可以看到[OrderDate]字段已经变为null . 在此之前它是字符串 . 我调用draw函数如下:
format = d3.time.format("%d-%m-%Y");
d3.csv("sample.csv", function(d){
d['OrderDate'] = format.parse(d['OrderDate']);
d['Quantity'] = +d["Quantity"];
d['ItemPrice'] = +d["ItemPrice"];
d['totalSale']= d['Quantity']*d['ItemPrice'];
return d;
} ,draw);
如果我保留OrderDate的字符串格式,则time_extent将不正确 . 这是使用字符串而不是解析到日期时的外观:
我正在使用的数据也如下所示:
感谢任何帮助将OrderDate的格式正确更改为日期 .
感谢您的关注 .