D3：<rect>属性x：预期长度，“NaN”。错误

Question

我必须在D3中实现条形图，但我在x轴上的值是Date类型，D3库应该接受的数据类型，但它似乎给我一个这样的错误：属性x：预期长度，“NaN”。

这是我的条形图的代码：

//this holds the data that will be drawn
                                var data = [  {"yy":12,"mm":01,ppm_value:90000},           {"yy":11,"mm":02,ppm_value:50000}];;

                                //formats the date
                                var format = d3.time.format("%Y-%m-%d");

                                //define margins, height and width
                                var margin = {
                                        top: 20,
                                        right: 30,
                                        bottom: 30,
                                        left: 40
                                    },
                                    w = 1000 - margin.left - margin.right,
                                    h = 500 - margin.top - margin.bottom;

                                /*var x = d3.time.scale()
                                    //.domain([0, d3.max(data, function(d) { return d.date; })])
                                    .range([0, w], 0.6);*/
                                var x = d3.time.scale()
                                    .range([0, w]);

                                var y = d3.scale.linear()
                                    //.domain([0, d3.max(data, function(d) { return d.ppm_value;})])
                                    .range([h, 0]);

                                var xAxis = d3.svg.axis()
                                    .scale(x)
                                    .orient("bottom")
                                    //.tickFormat(d3.time.format("%Y/%m"));

                                var yAxis = d3.svg.axis()
                                    .scale(y)
                                    .orient("left");

                                var zoom = d3.behavior.zoom()
                                    .scaleExtent([1, 1])
                                    .x(x)
                                    .on("zoom", zoomed);

                                //create the svg 
                                var chart = d3.select("#testChart").append("svg")
                                    .attr("width", w + margin.left + margin.right)
                                    .attr("height", h + margin.top + margin.bottom)
                                    .append("g")
                                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                                    .call(zoom);

                                var rect = chart.append("rect")
                                    .attr("width", w)
                                    .attr("height", h)
                                    .style("fill", "none")
                                    .style("pointer-events", "all");

                                //loops through data
                                data.forEach(function (d) {

                                 //coerce to number
                                    d.ppm_value = +d.ppm_value;
                                    d.yy = +d.yy;
                                    d.mm = +d.mm;
                                    d.date = new Date("20" + d.yy + "/" +d.mm);
                                    var dateTick = format(d.date);
                                    d.date = dateTick;
                                    console.log(d.ppm_value);
                                    //console.log(dateTick);
                                    //console.log(d.date);
                                });

                                //var dates = data.map(function(d){ return new Date("2016/01/03"); });
                                //console.log(formDate);
                                //map values onto x axis
                                 x.domain([d3.min(data, function(d) { return d.date; }), d3.max(data, function(d) { return d.date; })])

                                // x.domain([0, d3.max(function(d) { return d.date; })]);
                                 //map values onto y axis
                                 y.domain([0, d3.max(data, function(d) { return d.ppm_value; })]);

                                chart.append("g")
                                    .attr("class", "x axis")
                                    .attr("transform", "translate(0," + h + ")")
                                    .call(xAxis)

                                chart.append("g")
                                    .attr("class", "y axis")
                                    .call(yAxis);

                                var bars = chart.append("g")
                                    .attr("class", "chartobjects");

                                bars.selectAll(".rect")
                                    .data(data)
                                    .enter().append("rect")
                                    .attr("class", "rectBar")
                                    .on("click",hello)
                                    .attr('x', function(d) {
                                        console.log(d.date);
                                        return x(new Date(d.date));
                                    })
                                    .attr("y", function(d) {
                                        return y(d.ppm_value);
                                        console.log(d.ppm_value);
                                    })
                                    .attr("height", function(d) {
                                        return h - y(d.ppm_value);
                                    })
                                    .attr("width", 15)
                                    .attr("fill", function(d) {
                                        return d.ppm_value > 6 ? "blue" : "red"
                                    });

                                function hello() {
                                    alert("Hello world!!")
                                }

                                function zoomed() {
                                    console.log("Entered zoom function!!!");
                                    var tx = Math.max(0, d3.event.translate[0])
                                    //ty = Math.min(0, d3.event.translate[1]);
                                zoom.translate([tx]);
                                bars.attr("transform", "translate(" + [tx] + ")scale(" + d3.event.scale + ")");
                                chart.select(".x.axis")
                                    .call(xAxis);
                                //chart.select(".y.axis")
                                //  .call(yAxis);

                                }

我似乎无法找到问题的根源。难道我做错了什么 ？你认为有什么问题？

提前致谢！