图表未呈现我的日期数据

Question

使用 javascript，D3.js，这是我第一次处理 D3。我开始使用一个工作示例，但现在它不起作用： My Graph 这是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 坐标处都有点，就像这个图表：Original Graph。

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

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

未捕获的类型错误：无法读取未定义的属性“长度”

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

我应该补充一点，如果放大，图表会显示重复的日期，我不确定这是否可能是问题；也许图表对绘制哪个数据点感到困惑？ （顺便说一下，重复的日期是另一个问题）

Answer 1

您应该使用日期格式化程序将 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);
  });

工作示例here

Answer 2

d3.time.scale 函数接受一个 javascript 日期对象。

在你的 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);
  });