D3 Ошибка Parsing

Это, скорее всего, очень простой вопрос (но я новичок в D3 и пытаюсь перейти к некоторым примерам, чтобы лучше понять, как это работает). Я пытаюсь изменить один из базовых примеров для D3 (http://bl.ocks.org/mbostock/1667367). Я в основном сохранил все то же самое ... Я просто пытаюсь использовать другой файл csv с моими собственными данными (по сравнению с данными запаса S P 500). В файле примера файл csv имеет дату (месяц) и цену акций. По моим данным, у меня есть отметка времени UTC и значение света (от 0 до 1000). Вот небольшой пример CSV:D3 Ошибка Parsing

date, light 
2013-01-01T09:00:00.000Z,554.22 
2013-01-01T09:01:00.000Z,480.83 
2013-01-01T09:02:00.000Z,433.19 
2013-01-01T09:03:00.000Z,596.89 
2013-01-01T09:04:00.000Z,421.78 
2013-01-01T09:05:00.000Z,461.23 
2013-01-01T09:06:00.000Z,560.04

Когда я запускаю мой код, я получаю сообщение об ошибке в окне консоли, говоря у меня есть ошибка синтаксического анализа (не уверен, если это попасться в анализе данных или свет value) ... Кто-нибудь видит проблему с тем, как я настраиваю файл csv (или как я могу его разобрать)? Вот код D3, с которым я работаю.

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

svg { 
    font: 10px sans-serif; 
} 

path { 
    fill: steelblue; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.brush .extent { 
    stroke: #fff; 
    fill-opacity: .125; 
    shape-rendering: crispEdges; 
} 

</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 

var margin = {top: 10, right: 10, bottom: 100, left: 40}, 
    margin2 = {top: 430, right: 10, bottom: 20, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom, 
    height2 = 500 - margin2.top - margin2.bottom; 

var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse; 

var x = d3.time.scale().range([0, width]), 
    x2 = d3.time.scale().range([0, width]), 
    y = d3.scale.linear().range([height, 0]), 
    y2 = d3.scale.linear().range([height2, 0]); 

var xAxis = d3.svg.axis().scale(x).orient("bottom"), 
    xAxis2 = d3.svg.axis().scale(x2).orient("bottom"), 
    yAxis = d3.svg.axis().scale(y).orient("left"); 

var brush = d3.svg.brush() 
    .x(x2) 
    .on("brush", brush); 

var area = d3.svg.area() 
    .interpolate("monotone") 
    .x(function(d) { return x(d.date); }) 
    .y0(height) 
    .y1(function(d) { return y(d.light); }); 

var area2 = d3.svg.area() 
    .interpolate("monotone") 
    .x(function(d) { return x2(d.date); }) 
    .y0(height2) 
    .y1(function(d) { return y2(d.light); }); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom); 

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

var focus = svg.append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var context = svg.append("g") 
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")"); 

d3.csv("Light.csv", function(error, data) { 
    console.log(data); 

    data.forEach(function(d) { 
    d.date = parseDate(d.date); 
    //d.light = +d.light; 
    //console.log(d); 
    }); 

    x.domain(d3.extent(data.map(function(d) { return d.date; }))); 
    y.domain([0, d3.max(data.map(function(d) { return d.light; }))]); 
    x2.domain(x.domain()); 
    y2.domain(y.domain()); 

    focus.append("path") 
     .datum(data) 
     .attr("clip-path", "url(#clip)") 
     .attr("d", area); 

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

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

    context.append("path") 
     .datum(data) 
     .attr("d", area2); 

    context.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height2 + ")") 
     .call(xAxis2); 

    context.append("g") 
     .attr("class", "x brush") 
     .call(brush) 
    .selectAll("rect") 
     .attr("y", -6) 
     .attr("height", height2 + 7); 
}); 

function brush() { 
    x.domain(brush.empty() ? x2.domain() : brush.extent()); 
    focus.select("path").attr("d", area); 
    focus.select(".x.axis").call(xAxis); 
} 

</script>

источник

2013-03-22 andyopayne

Вы, вероятно, получить эту ошибку из-за ваше время спецификации формата - нет %L заполнителя (см the documentation). Это должно сработать.

var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.000Z").parse;

источник

2013-03-22 21:58:17

Спасибо за быстрый ответ. Я попытался изменить объявление формата, но я все еще получаю ошибку синтаксического анализа. Вы заметите, что сразу после получения данных из файла csv я печатаю данные на консоли. Когда я смотрю на эти данные, он печатает свет: «554.22» дата: Вт янв. 01 2013 09:00:00 GMT-0500 (восточное стандартное время) ... однако объект даты имеет рядом со стрелкой маленькую стрелку (который вы можете расширить), и когда я это сделаю, он говорит __proto__: Недействительная дата. Есть предположения? – andyopayne

Хорошо, вам нужно немного помочь мне здесь - где он получает ошибку синтаксического анализа? –

Трудно сказать. Сообщение об ошибке действительно длинное (например, 50 строк). В основном это говорит: Ошибка: разбор проблем ... тогда у него есть целая куча чисел и материал NAN, а затем внизу сообщения об ошибке он указывает на d3.v3.min.js: 1 Помогает ли это? – andyopayne

В заголовке вашего файла csv заголовок «light» имеет дополнительное пространство перед ним. Это приводит к проблемам с обработкой d3.csv.

data.forEach(function(d) { 
    d.date = parseDate(d.date); 
    d.light = +d.light; // won't be able to access the light column data with the space 
    d.light = d[' light']; // this would work if you can't fix the header at the csv source 
});

Хммм, может быть, я представить патч для d3, чтобы это исправить ...

источник

2013-03-23 21:03:36 Digikata

D3 Ошибка Parsing

ответ

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