Пример диаграммы D3 Пример: наличие проблем с датами

Я взял пример D3 Line Graph и немного изменил его, чтобы запустить с использованием локальных данных. Я закомментировал data.tsv() и заменил его data.forEach() на массив данных var, который должен выполнить то же самое.Пример диаграммы D3 Пример: наличие проблем с датами

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

Моя текущая версия просто и ошибочно рисует вертикальную линию при x = 0 (по оси). Вот путь SVG:

<path class="line" 
d="M0,450 
L0,307.85928143712596 
L0,72.7544910179639 
L0,0 
L0,8.083832335329655 
L0,30.314371257485206"></path>

Я не знаю, что я ошибаюсь. Я просто хочу, чтобы график данных, 5 баллов в массиве данных. Я понимаю, что у меня, вероятно, есть синтаксическая ошибка (которая вызовет головную пощечину, когда она будет указана), но более подробно, я могу сказать, что не понимаю, что D3 хочет от временных данных. Какой тип D3 нужен для данных даты, что делает time.format.parse() по сравнению с парсером даты javascript? Зачем использовать один, а не другой? Когда я получу возврат NaN и 0?

Вот мой код:

<!DOCTYPE html> 
<head> 
    <meta charset="utf-8" /> 
    <title>LGTest</title> 
</head> 
<style> 
    body { 
     font: 10px sans-serif; 
    } 

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

    .x.axis path { 
     display: none; 
    } 

    .line { 
     fill: none; 
     stroke: steelblue; 
     stroke-width: 1.5px; 
    } 
</style> 
<body> 
    <script src="d3.min.js"></script> 
<script> 
    var data = [ 
     { date: "24-Apr-07", close: 93.24 }, 
     { date: "25-Apr-07", close: 95.35 }, 
     { date: "26-Apr-07", close: 98.84 }, 
     { date: "27-Apr-07", close: 99.92 }, 
     { date: "30-Apr-07", close: 99.80 }, 
     { date: "1-May-07", close: 99.47 } 
    ]; 
var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var formatDate = d3.time.format("%e-%b-%y"); 

data.forEach(function (d) { d = type(d) }); 


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

var y = d3.scale.linear() 
    .range([height, 0]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left"); 

var line = d3.svg.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.close); }); 

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 + ")"); 

//d3.tsv("data.tsv", type, function(error, data) { 
// if (error) throw error; 

    x.domain(d3.extent(data, function(d) { return d.date; })); 
    y.domain(d3.extent(data, function(d) { return d.close; })); 

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

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Price ($)"); 

    svg.append("path") 
     .datum(data) 
     .attr("class", "line") 
     .attr("d", line); 
//}); 

    function type(d) { 
     d.date = formatDate.parse(d.date); 
     d.close = +d.close; 
    return d; 
} 

</script> 
</body>

Спасибо за любую помощь, советы, увещевания и т.д.

источник

2016-04-25 Lindsay Morsillo

Я сделал скрипку, в чем здесь проблема? https://jsfiddle.net/xcn35ycm/5/ – echonax

Ничего себе. Это блестящая идея сделать это на jsfiddle - она работает там, что является другим результатом, чем на моей машине! Я обновлю библиотеку d3, которую я использую, чтобы увидеть, влияет ли это на нее. –

Я сделаю это ответом, чтобы мы могли обновить его оттуда. – echonax

Я сделал скрипку. Кажется, он работает нормально, в чем проблема?

Я использовал эти данные:

var data = [ 
     { date: "24-Apr-07", close: 93.24 }, 
     { date: "25-Apr-07", close: 95.35 }, 
     { date: "26-Apr-07", close: 98.84 }, 
     { date: "27-Apr-07", close: 99.92 }, 
     { date: "30-Apr-07", close: 99.80 }, 
     { date: "1-May-07", close: 99.47 } 
    ];

https://jsfiddle.net/xcn35ycm/5/

источник

2016-04-25 18:43:36 echonax

Итак, я удалил стили из кода, который у меня был, поскольку это было единственное реальное различие между моим примером и jsFiddle. Как только я это сделал, он сработал. Итак, это не обязательно, что я не понимаю даты, я не понимаю эффекты стилей и CSS для рендеринга d3. Это важно для меня знать, поэтому спасибо за урок! –

jsfiddle - это потрясающий инструмент для отладки такого рода вещей. Рад, что смог помочь – echonax

Пример диаграммы D3 Пример: наличие проблем с датами

ответ

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