Линейный график - не отображается

Question

У меня возникла проблема с пониманием того, как работает команда d3.svg.line(), если она должна быть объединена с путем или нет.
Я пытался нарисовать линейный график, используя csv, состоящий из двух столбцов (день, температура) с числовыми значениями, но я не могу понять, почему код ничего не показывает.

Jsfiddle здесь: http://jsfiddle.net/UjhjY/

var line = svg.selectAll("line") 
        .data(dataset) 
        .enter() 
        .append("line") 
        .interpolate("linear") 
        .x(function (i) { return xScale(i); }) 
        .y(function (d) { return yScale(d[1]); }); 

     var path = svg.append("path") 
      .attr("d", line(dataset)) 
      .attr("stroke", "blue") 
      .attr("stroke-width", 2) 
      .attr("fill", "none"); 

В процессе работы над кодом браузер ничего, кроме файла SVG не показывают. И я довольно не знаю, что теперь делать. Любая помощь и объяснение были бы очень оценены, так как я читал почти все, что мог найти о линии и пути, но не мог заставить ее работать.

Answer 1

Есть несколько проблем с кодом. Во-первых, d3.csv - это асинхронный обратный вызов, и вы не можете использовать его, как var dataset = d3.csv("line_graph.csv");. Второй аргумент, который он принимает, - это функция, которая имеет доступ к данным. Код должен выглядеть так.

d3.csv("file.csv", function(error, data) { 
    // create graph 
}); 

Вы, вероятно, также хотят, чтобы преобразовать данные разобранные из CSV из строк в любой фактический формат данных, например для номеров

data.forEach(function(d) { 
    d.temperature = +d.temperature; 
}); 

При настройке весов убедитесь, что вы указали правильные части данных. вы, вероятно, хотите что-то вроде

var yScale = d3.scale.linear() 
    .domain([0, d3.max(dataset, function (d) { return d.temperature; })]) 
    .range([0, height]); 

вместо возврата d[1].

Затем, чтобы создать линию, вам нужен line generator. Это будет настроено так.

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

Затем вы можете использовать генератор линий так, чтобы создать путь.

svg.selectAll("path").data(data) 
    .enter().append("path") 
    .attr("d", line); 

Это самые очевидные проблемы, которые поразили меня. Вот example, который довольно близок к тому, что вы ищете. Я бы настоятельно предложил перейти к нескольким учебным пособиям и примерам.