D3js format.parse()返回null rahter而不是Date

时间:2018-01-08 11:41:18

标签: javascript parsing d3.js data-visualization

我正在使用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将不正确。这是使用字符串而不是解析为日期时的外观:
time_extent and time_scale shown in console

我正在使用的数据也如下所示:

Format of OrderDate field in csv file

感谢任何帮助将OrderDate的格式正确更改为日期。

感谢您的关注。

0 个答案:

没有答案