d3 csv data loading

Я пытаюсь адаптировать простую программу рассеяния в D3, чтобы принять файл CSV. Когда я использую данные в файле, он работает нормально, но когда я пытаюсь загрузить файл CSV, он просто не работает. Есть что-то простое, чего я не хватает? Содержимое CSV-файла «datatest.csv» совпадает с содержимым набора данных в коде. Я проверил, что браузер загружает данные, и, похоже, все они есть. Я полагаю, что я просто пропустил шаг.d3 csv data loading

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>D3 Demo: Linear scales</title> 
    <script type="text/javascript" src="../d3/d3.v3.js"></script> 
    <style type="text/css"> 
     /* No style rules here yet */  
    </style> 
</head> 
<body> 
    <script type="text/javascript"> 

     //Width and height 
     var w = 900; 
     var h = 500; 
     var padding = 20; 
     var dataset = []; 

//   var dataset = [ 
//       [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], 
//       [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], 
//       [600, 150] 
//      ]; 

     d3.csv("datatest.csv", function(data) { 
     dataset=data 
     }); 



     //Create scale functions 
     var xScale = d3.scale.linear() 
          .domain([0, d3.max(dataset, function(d) { return d[0]; })]) 
          .range([padding, w - padding * 2]); 

     var yScale = d3.scale.linear() 
          .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
          .range([h - padding, padding]); 

     var rScale = d3.scale.linear() 
          .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
          .range([2, 5]); 

     //Create SVG element 
     var svg = d3.select("body") 
        .append("svg") 
        .attr("width", w) 
        .attr("height", h); 

     svg.selectAll("circle") 
      .data(dataset) 
      .enter() 
      .append("circle") 
      .attr("cx", function(d) { 
       return xScale(d[0]); 
      }) 
      .attr("cy", function(d) { 
       return yScale(d[1]); 
      }) 
      .attr("r", function(d) { 
       return rScale(d[1]); 
      }); 
    </script> 
</body> 
</html>

Это содержимое файла CSV:

x-coordinate, y-coordinate 
5,20 
480,90 
250,50 
100,33 
330,95 
410,12 
475,44 
25,67 
85,21 
220,88 
600,150

источник

2013-02-20 English Grad

ВАЖНО:

Хотя ответ здесь работает, есть встроенный метод d3.csv.parseRows(), который достигает того же результата. Для этого см. Ответ @ ryanmt (также на этой странице). Однако имейте в виду, что независимо от метода, который вы используете, если ваш CSV имеет номера в нем, вам нужно будет преобразовать их из строк в javascript Numbers. Вы можете сделать это, префикс анализируемых значений +. Например, в предлагаемом мной решении, которое не использует parseRows(), это преобразование достигается посредством +d["x-coordinate"].

ОТВЕТ:

Парсер CSV производит массив объектов, а не массив массивов, которые вам нужны. Это выглядит следующим образом:

[ 
    {"x-coordinate":"5"," y-coordinate":"20"}, 
    {"x-coordinate":"480"," y-coordinate":"90"}, 
    {"x-coordinate":"250"," y-coordinate":"50"}, 
    {"x-coordinate":"100"," y-coordinate":"33"}, 
    ... 
]

Чтобы преобразовать его, вам нужно использовать map() функции:

d3.csv("datatest.csv", function(data) { 
    dataset = data.map(function(d) { return [ +d["x-coordinate"], +d["y-coordinate"] ]; }); 
});

(Примечание, map() не доступен в старых IE Если это имеет значение, то есть много. обходные пути с d3, jQuery и т. д.)

источник

2013-02-20 18:05:36 meetamit

В файле csv у меня есть информация в наборе данных, настроенная как список, разделенный запятой. каждый массив в наборе данных имеет свою собственную строку во внешнем файле. Файл CSV настроен правильно, я не могу понять, как правильно получить информацию из файла –

@EnglishGrad В первой строке вашего CSV есть имена столбцов? ds csv parser предполагает, что значения этой первой строки соответствуют именам свойств. Он использует эти имена свойств для создания массива объектов, а не массивов. Основываясь на моем понимании того, что вы описываете, нет никакого способа, которым это будет работать так, как вы это делаете. Попробуйте 'console.log'у данных и посмотреть, что вы получаете. – meetamit

Meetamit, спасибо за помощь. Я разместил содержимое CSV-файла выше –

D3 предоставляет встроенную функцию для этого самого.

Вместо того чтобы звонить по телефону .parse() по телефону, звоните .parseRows. Это предоставляет только данные как массив, а не объект (на основе строки заголовка).

см. Documentation.

источник

2014-02-21 18:03:20 Ryanmt

Не могли бы вы привести пример работы с '.parseRows'? Благодаря! –

d3 csv data loading

ответ

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