我正在使用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的格式正确更改为日期。
感谢您的关注。