Javascript 图形不呈现我的日期数据

使用javascript、D3.js，这是我第一次处理D3。我开始使用一个有效的示例，但现在它不起作用： 这是javascript代码：

//************************************************************
// Data notice the structure
//************************************************************
var data =  [
    [
     {'x':'01/01/2016','y':0},{'x':'01/02/2016','y':5},
     {'x':'01/03/2016','y':1},{'x':'01/04/2016','y':0},
     {'x':'01/05/2016','y':6},{'x':'01/06/2016','y':1},
     {'x':'01/07/2016','y':5}
    ],
    [
     {'x':'01/01/2016','y':1},{'x':'01/02/2016','y':6},
     {'x':'01/03/2016','y':2},{'x':'01/04/2016','y':1},
     {'x':'01/05/2016','y':7},{'x':'01/06/2016','y':2},
     {'x':'01/07/2016','y':6}
    ]
    [
     {'x':'01/01/2016','y':2},{'x':'01/02/2016','y':7},
     {'x':'01/03/2016','y':3},{'x':'01/04/2016','y':2},
     {'x':'01/05/2016','y':5},{'x':'01/06/2016','y':3},
     {'x':'01/07/2016','y':7}
    ]
];

var colors = [
    'steelblue',
    'green',
    'red'
]

var minDate = data[0][0].x;
var len = data[0].length;
var maxDate = data[0][len - 1].x;
console.log("minDate: "+minDate);
console.log("maxDate: "+maxDate);
//************************************************************
// Create Margins and Axis and hook our zoom function
//************************************************************
var margin = {top: 20, right: 30, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.time.scale()
    .domain([new Date(minDate), new Date(maxDate)])
    // .domain([ 0, 12 ])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([-1, 16])
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
  .ticks(5) // fixes the duplicate date issue until zooming in enough
    .tickSize(-height)
    .tickPadding(10)    
    .tickSubdivide(true)    
  .tickFormat(d3.time.format("%x"))

    .orient("bottom");  

var yAxis = d3.svg.axis()
    .scale(y)
    .tickPadding(10)
    .tickSize(-width)
    .tickSubdivide(true)    
    .orient("left");

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

//************************************************************
// Generate our SVG object
//************************************************************  
var svg = d3.select("body").append("svg")
    .call(zoom)
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

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

svg.append("g")
    .attr("class", "y axis")
    .append("text")
    .attr("class", "axis-label")
    .attr("transform", "rotate(-90)")
    .attr("y", (-margin.left) + 10)
    .attr("x", -height/2)
    .text('Bullshit');  

svg.append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("width", width)
    .attr("height", height);


// svg.xAxis
//   .tickFormat(function(d) {
//     return d3.time.format("%m/%d/%Y")(new Date(d));
// })

// svg.xScale(d3.time.scale());
//************************************************************
// Create D3 line object and draw data on our SVG object
//************************************************************
var line = d3.svg.line()
    .interpolate("linear")  
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });     

svg.selectAll('.line')
    .data(data)
    .enter()
    .append("path")
    .attr("class", "line")
    .attr("clip-path", "url(#clip)")
    .attr('stroke', function(d,i){          
        return colors[i%colors.length];
    })
    .attr("d", line);       




//************************************************************
// Draw points on SVG object based on the data given
//************************************************************
var points = svg.selectAll('.dots')
    .data(data)
    .enter()
    .append("g")
    .attr("class", "dots")
    .attr("clip-path", "url(#clip)");   

points.selectAll('.dot')
    .data(function(d, index){       
        var a = [];
        d.forEach(function(point,i){
            a.push({'index': index, 'point': point});
        });     
        return a;
    })
    .enter()
    .append('circle')
    .attr('class','dot')
    .attr("r", 2.5)
    .attr('fill', function(d,i){    
        return colors[d.index%colors.length];
    })  
    .attr("transform", function(d) { 
        return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }
    );






//************************************************************
// Zoom specific updates
//************************************************************
function zoomed() {
    svg.select(".x.axis").call(xAxis);
    // svg.select(".y.axis").call(yAxis);   
    svg.selectAll('path.line').attr('d', line);  

    points.selectAll('circle').attr("transform", function(d) { 
        return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }
    );  
}

因此，我试图在文章的顶部呈现示例数据。我的最终目标是创建一个包含三条绘制线的图形，这些线在每个x，y坐标处都有点，非常类似于此图形：

再说一次，我对D3不是很有经验，我试着寻找一些例子（我找到了一些），但我仍然无法让我的图表显示我的线条。现在，如果您检查我的图表上的控制台，我有以下错误：

错误：属性d=“MNaN”的值无效， 423.52941176470586LNaN， 291.17647058823525LNaN， 397.05882352941177LNaN， 423.52941176470586LNaN， 264.70588235294116LNaN， 397.05882352941177LNaN， 291.17647058823525“

未捕获的TypeError:无法读取未定义的属性“length”

我自己的结论（可能很模糊）告诉我，我没有正确解析数据

---

我应该补充一点，如果放大，图表会显示重复的日期，我不确定这是否是问题所在；也许图形在哪个数据点上绘图变得混乱了？（顺便说一句，重复的日期是另一个问题）

您应该使用日期格式化程序将x

（'01/01/2016'）

中的字符串转换为日期：

var format = d3.time.format("%m/%d/%Y");

并使用此格式化程序将日期转换为日期对象

var x = d3.time.scale()
  .domain([format.parse(minDate), format.parse(maxDate)])

同样的格式化程序也在行函数中

var line = d3.svg.line()
  .interpolate("linear")
  .x(function(d) {
    return x(format.parse(d.x));//convert into date
  })
  .y(function(d) {
    return y(d.y);
  });

工作示例

函数接受javascript日期对象

var x = d3.time.scale()
  .domain([format.parse(minDate), format.parse(maxDate)])

在line函数中，输入一个日期字符串。在将日期字符串传递给函数之前，首先需要将其解析为javascript日期对象

var line = d3.svg.line()
  .interpolate("linear")
  .x(function(d) {

    return x(new Date(d.x));
    console.log(d.x, x(new Date(d.x))); // x(new Date(d.x)) now doesn't return NAN =]
  })
  .y(function(d) {
    return y(d.y);
  });

---

嗯，我觉得很可笑。我几乎可以肯定我试过这个！非常感谢。不过有一件事，我注意到控制台正在为打印错误。你知道为什么不处理数据点来呈现图形上的点吗？没有什么新的错误：）应该是

x（format.parse（d.point.x））

来将它转换成日期修正的小提琴。我想我要学习D3还有很长的路要走。再次感谢你的帮助；尽管这个问题很可笑，但我实际上至少花了一天左右的时间试图弄清楚它为什么不起作用！哎呀！我先看到了其他人的反应，我不知道我是如何浏览这张照片的。我试过你的例子，它也有效！非常感谢。然而，我有一个和@Cyril一样的问题要问你，你知道为什么图形上的点不再被绘制吗？？