Закрепленный с интегрированием d3 с данными

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>D3 Demo: SVG with data</title> 
<script type="text/javascript" src="d3/d3.v3.js"></script> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<script type="text/javascript"> 

var dataset = { 
    "entry":[ 
    {"date": "2011-03-18T00:00:04"}, 
    {"date": "2011-04-18T00:05:03"}, 
    {"date": "2011-03-29T00:10:04"}, 
    {"date": "2011-05-19T00:15:03"}, 
    {"date":"2011-06-12T00:20:03"}, 
    {"date": "2011-08-09T00:25:03"} 
    ], 

"entry" :[ 
    {"date": "2012-03-18T00:00:04"}, 
    {"date": "2012-04-18T00:05:03"}, 
    {"date": "2012-03-29T00:10:04"}, 
    {"date": "2012-05-19T00:15:03"}, 
    {"date":"2012-06-12T00:20:03"}, 
    {"date": "2012-08-09T00:25:03"} 
    ] 
} 

console.log(dataset.entry); 

var height = 600; 
var width = 500; 
var x = d3.time.scale().domain([new Date(2011, 0, 1,23,33,00), new Date(2013, 0, 1, 23, 59)]).range([0, width]); 



var svg = d3.selectAll("body") 
.append("svg") 
.attr("width",width) 
.attr("height",height) 
.attr("shape-rendering","crispEdges"); 


svg.selectAll("body") 
.data(dataset) 
.enter() 
.append("rect") 
.attr("width", 4) 
.attr("height",12) 
.attr("x", function(d) { return x(new Date(d.entry.date)); }) 
.attr("y",function(d,i){return i*10;}) 
.attr("fill","steelblue"); 

</script> 
</body> 
</html>

Это простой файл, который я создал. Цель состоит в том, чтобы имитировать диаграмму Ганта. Как вы можете видеть, в массивах имеется 12 значений. Я делаю что-то не так, что ничего не печатает.Закрепленный с интегрированием d3 с данными

Может ли кто-нибудь вести меня?

источник

2013-02-18 adithyavr

Проверьте свой сайт в Chrome и посмотрите, какая ошибка это дает вам в консоли. –

'dataset' - это объект. Нет JSON в поле зрения. Afaik, '.data' ожидает передачи массива, а не объекта. –

Действительно JSON @FelixKling –

Данные, переданные в выбор d3, должны быть массивом. Я думаю, что вы хотите:

svg.selectAll("body") 
    .data(dataset.entry) 
    ... 
    .attr("x", function(d) { return x(new Date(d.date)); })

Кроме того, удалите один из ваших атрибутов «ввода» в «наборе данных». Они, кажется, дублируются в вашем текущем коде, который, как я подозреваю, является ошибкой копирования/вставки.

Если это не ошибка копирования/вставки, вы не можете определить два элемента «ввода», которые называются одинаково - вам нужно будет преобразовать набор данных в массив. IE:

var dataset = [ [ {"date": "blah" } ], [ {"date":"blah" } ] ];

И измените способ доступа к данным.

источник

2013-02-18 16:17:24 cmonkey

спасибо большое, что помогло. Кстати, пожалуйста, предложите мне правильную ссылку, где я могу узнать о Джсоне? – adithyavr

Возможно, в качестве отправной точки: http://www.w3schools.com/json/json_syntax.asp – cmonkey

Закрепленный с интегрированием d3 с данными

ответ

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