Форматирование в JSON Файл для использования в D3.js

У меня возникли проблемы с пониманием того, как форматировать даты и время в JSON.
Я пытаюсь использовать файл в фрагменте кода D3.js. Я ценю любое объяснение, которое у вас может быть, поскольку я новичок в JSON и относительно новый для D3.Форматирование в JSON Файл для использования в D3.js

[ 
    {"BeaconMac":"Office","UserMac":"22", "Date": "3.6.2015", "Time":"8:09"}, 
    {"BeaconMac":"Office","UserMac":"42", "Date": "3.6.2015", "Time": "8:10"}, 
    {"BeaconMac":"TreatmentRoom","UserMac:":"60", "Date": "3.6.2015", "Time":"8:11"} 
]

Вот код, который я реализую. Когда я запускаю его, он ничего не показывает.

<!-- 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 
<body> 
    <p>Hello world</p> 
</body> 
</html>--> 
<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <title>D3 Tutorial</title> 
    <!--let browser know where to find library--> 
    <script src = "http://d3js.org/d3.v3.min.js"></script> 
</head> 


<body> 

<script> 

    d3.json("data.json", function(data){ 

     var canvas = d3.select("body").append("svg") 
       .attr("width", 500) 
       .attr("height", 500); 

     canvas.selectAll("rect") 
       .data(data) 
       .enter() 
        .append("rect") 
        .attr("width", function(d){return d.Time * 10;}) 
        .attr("height", 48) 
        .attr("y", function(d, i){return d.Date * 50;}) 
        .attr("fill", "blue"); 
     /*canvas.selectAll("text") 
       .data(data) 
       .enter() 
       .append("text") 
       .attr("fill","white") 
       .attr("y", function(d,i){return i * 50;}) 
       .text(function(d){return d.name + 24;})*/ 
    }) 

</script> 




</body> 

</html>

источник

2016-02-10 Ashley

В чем же проблема? Что вы пытаетесь сделать, что не работает? – Cleb

Это не работает, когда я загружаю json-файл, потому что, полагаю, дата и/или время не отформатированы правильно. – Ashley

Можете ли вы опубликовать код или URL-адрес jsfiddle? –

-1

Я ничего не знаю о D3, но ваши «даты» определенно не являются объектами даты JavaScript. Если открыть консоль JavaScript в Chrome (в качестве примера), легко видеть, что JavaScript хотел бы дату, чтобы посмотреть, как в формате JSON:

var myDate = new Date(); 

console.log(myDate); 
VM415:2 Wed Feb 10 2016 13:09:29 GMT-0700 (MST) 

myDate.toJSON(); 
"2016-02-10T20:09:29.056Z"

Что вы имеете в вашем JSON не дата объект просто имеют строки с метками даты и времени. Объект Date может представлять как дату, так и время в одном объекте.

Возможно, у D3 есть совершенно другая идея о том, что такое дата и время, но если они ищут фактический объект JavaScript Date, вам нужно будет изменить то, что находится в вашем JSON.

источник

2016-02-10 20:15:06

Да, но я пытаюсь загрузить данные, поэтому дата была бы предыдущей, а не текущей датой. – Ashley

. Как вы получаете дату, зависит от вас - посмотрите на API-интерфейсы для объекта JavaScript Date, чтобы узнать, как вы делаете Date объектов на определенную дату и время. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date Существуют также библиотеки, такие как Moment.js, которые могут помочь в этом процессе. –

Вы правы, что даты должны быть обработаны до того, как они пригодны для использования, поскольку они в настоящее время находятся в строковой форме. Поэтому вам нужно создать объекты Date или, возможно, Numbers из них. Итак, для начала вам нужно перебрать данные, чтобы вы могли получать доступ и изменять каждую дату. Вы что, как только данные загружаются:

d3.json("data.json", function(data){ 
    data.forEach(function(d) { 
    // Here d is an entry in the data array 
    console.log(d.Date); // logs "3.6.2015" 3 times 

    // Now do something with d.Date... 
    });

Вопрос заключается в том, что делать, и это несколько зависит от того, как вам это нужно, чтобы данные были. Но, скорее всего, вы хотите создать объекты Date, эквивалент вызова new Date(2015, 2, 6).

D3 имеет удобные функции, которые будут форматировать и/или анализировать строки из/в объекты Date. Например:

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

formatter теперь является функцией, что если вы вызываете его с объектом даты, например formatter(new Date()) возвращает строку, например, «02.10.2015». Вы можете узнать больше о том, как этот формат указан с помощью этих % символов в d3 API reference.

Однако вам нужно сделать противоположное примеру выше; вы хотите преобразовать форматированную строку в объект даты. Это тоже возможно, с помощью этого formatter функции:

formatter.parse("2.6.2015")

, который возвращает объект Date установлен в Feb 6 2015

Собираем все вместе, цикл с самого начала будет выглядеть примерно так:

d3.json("data.json", function(data) { 
    var formatter = d3.time.format("%m.%d.%Y"); 
    data.forEach(function(d) { 
    d.Date = formatter.parse(d.Date); 
    }); 
})

источник

2016-02-10 20:23:07 meetamit

Форматирование в JSON Файл для использования в D3.js

ответ

Смежные вопросы