D3js format.parse() returns null rahter than Date

I am using d3js v3.x to visualize sales data. I have cleaned the data in my SQL Server database and have made sure the field "OrderDate" is of type Date in the database. I have then exported data to csv. I am trying to make a dot chart to show total sales amount per year by using d3js. But when I parse OrderDate to date format, it becomes all null by checking console.table(data). I don't know why format.parse() returns null for those values. This is my function:

    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;
};

when I call my draw() function in the body, and put a debugger in time_extent, I can see the field [OrderDate] has changed into null. Before that it is string. I am calling draw function as follows:

     

        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);
    

If I keep the string format for OrderDate the time_extent would not be correct. This is how it looks when working with string rather than parsing to date:

The data I am working with also looks as follow:

I appreciate any help to change the format of OrderDate correctly to date.

Thank you for your attention.

链接地址: http://www.djcxy.com/p/90978.html

上一篇: 什么是低于正常的浮点数？

下一篇: D3js format.parse（）返回null比Date