D3js format.parse（）返回null比Date

我正在使用d3js v3.x来可视化销售数据。 我清理了SQL Server数据库中的数据，并确保数据库中的“OrderDate”字段的类型为Date。 然后我将数据导出到csv。 我想通过使用d3js来制作一个圆点图来显示每年的总销售额。 但是，当我将OrderDate解析为日期格式时，它通过检查console.table（data）变为全空。 我不知道为什么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;
};

当我在正文中调用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将不正确。 这是使用字符串而不是解析到日期时的样子：

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

我很感谢帮助您正确更改订单日期的格式。

感谢您的关注。

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

上一篇: D3js format.parse() returns null rahter than Date

下一篇: D3 Y Scale, y vs height?