Диаграмма D3 v4 с датами JSON

Question

Я работал над этим в течение нескольких дней, и я не могу на самом деле получить свою линию и получить некоторые проблемы с формированием даты, которые я не могу взломать.

Использование этой D3 v3 скрипки в качестве вдохновения: http://jsfiddle.net/vmvp0zja/ Я попытался преобразовать ее в D3 v4, но я не могу получить мои данные правильно.

Я пытаюсь сделать несколько строк, но я не могу даже сделать один ..

Не могли бы вы посмотреть и увидеть, что я здесь отсутствует? Благодаря! :)

// JSON data: 
var data = [ 
{"Date":"\/Date(1475272800000)\/","Open":0,"Closed":0}, 
{"Date":"\/Date(1475359200000)\/","Open":0,"Closed":0}, 
{"Date":"\/Date(1475445600000)\/","Open":0,"Closed":0}, 
{"Date":"\/Date(1475532000000)\/","Open":0,"Closed":0}, 
{"Date":"\/Date(1475618400000)\/","Open":0,"Closed":0}, 
{"Date":"\/Date(1475704800000)\/","Open":0,"Closed":0}, 
{"Date":"\/Date(1475791200000)\/","Open":0,"Closed":0}, 
{"Date":"\/Date(1475877600000)\/","Open":0,"Closed":0}, 
{"Date":"\/Date(1475964000000)\/","Open":0,"Closed":0}, 
{"Date":"\/Date(1476050400000)\/","Open":0,"Closed":0}, 
{"Date":"\/Date(1476136800000)\/","Open":0,"Closed":0}, 
{"Date":"\/Date(1476223200000)\/","Open":0,"Closed":0}, 
{"Date":"\/Date(1476309600000)\/","Open":0,"Closed":0}, 
{"Date":"\/Date(1476396000000)\/","Open":0,"Closed":0}, 
{"Date":"\/Date(1475445600000)\/","Open":1,"Closed":0}, 
{"Date":"\/Date(1475532000000)\/","Open":1,"Closed":0}, 
{"Date":"\/Date(1475618400000)\/","Open":2,"Closed":0}, 
{"Date":"\/Date(1475791200000)\/","Open":9,"Closed":0}, 
{"Date":"\/Date(1475964000000)\/","Open":1,"Closed":0}, 
{"Date":"\/Date(1475445600000)\/","Open":0,"Closed":1}, 
{"Date":"\/Date(1475532000000)\/","Open":0,"Closed":1}, 
{"Date":"\/Date(1475618400000)\/","Open":0,"Closed":1}, 
{"Date":"\/Date(1475964000000)\/","Open":0,"Closed":1}] 

Это мой D3 беспорядок:

// linechart.js 
var formatTime = d3.timeFormat("%Y-%m-%d"); 

    data.forEach(function (d) { 
     var unixToISO = new Date(d.Date.match(/\d+/)[0]*1); 
     d.Date = formatTime(unixToISO); 
     d.Open = +d.Open; 
     d.Closed = +d.Closed; 
       console.log(d.Date); 
     return d; 
    }); 

    var margin = {top: 30, right: 40, bottom: 30, left: 50 }, 
     width = 600 - margin.left - margin.right, 
     height = 270 - margin.top - margin.bottom; 

    var x = d3.scaleTime() 
     .range([0, width]); 

    var y0 = d3.scaleLinear() 
     .range([height, 0]); 

    // Scale the range of the data 
    x.domain(d3.extent(data, function (d) { return d.Date; })); 
    y0.domain([ 
     d3.min(data, function (d) { return Math.min(d.Open); }), 
     d3.max(data, function (d) { return Math.max(d.Open); })]); 


    var valueline1 = d3.line() 
     .x(function (d) { console.log(x(d.Date)); return x(d.Date); }) 
     .y(function (d) { return y(d.Open); }); 

    var svg = d3.select("body") 
     .append("svg") 
     .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") // Add the X Axis 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x)); 

    svg.append("g") 
     .attr("class", "y axis") 
     .style("fill", "steelblue") 
     .call(d3.axisLeft(y0)); 

    svg.append("path") // Add the valueline path. 
     .data(data) 
     .attr("class", "line") 
     .attr("d", valueline1); 

Помощь высоко ценится заранее. Я, вероятно, не замечаю ничего очевидного. Спасибо!

Answer 1

Изменения:

data.forEach(function(d) { 
    var unixToISO = new Date(d.Date.match(/\d+/)[0] * 1); 
    d.Date = unixToISO; // here 
    d.Open = +d.Open; 

// (...) 
var valueline1 = d3.line() 
    .x(function(d) { 
    console.log(x(d.Date)); 
    return x(d.Date); 
    }) 
    .y(function(d) { 
    return y0(d.Open); // here 
    }); 

// (...) 
svg.append("path") 
    .data([data]) // here 
    .attr("class", "line") 
    .attr("d", valueline1); 

и добавил х-метки оси с

svg.append("text") 
    .attr("transform", "translate(" + (width/2) + " ," + 
    (height + margin.top + 20) + ")") 
    .style("text-anchor", "middle") 
    .text("Date"); 

BTW, ваши данные несортированный.

• JSFiddle Demo

• Docs reference