Загрузка CSV-файла с d3.js v.4

Question

Загрузка CSV-файла с d3.js v.4

1

Я новичок в d3 и javascript и не могу разобраться в следующем.

Я пытаюсь загрузить файл csv с d3.csv, но столкнулся с проблемой.

d3.csv("data2.csv")
    .row(function (d){
        return {
            ax: Number(d.ax.trim().slice(1)),
            ay: Number(d.ay.trim().slice(1))
        };
    })
    .get(function (error, data){
        console.log(data)
    });

Мой файл csv

ax,ay,az 
1,40,50 
2,41,49 
3,39,52 
4,35,49 
5,34,46 
6,33,45 
7,32,42 
8,30,40 
9,29,32 
10,27,26

console.log дает мне следующее:

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, columns: Array(3)]
0    :    {ax: 0, ay: 0}
1    :    {ax: 0, ay: 1}
2    :    {ax: 0, ay: 9}
3    :    {ax: 0, ay: 5}
4    :    {ax: 0, ay: 4}
5    :    {ax: 0, ay: 3}
6    :    {ax: 0, ay: 2}
7    :    {ax: 0, ay: 0}
8    :    {ax: 0, ay: 9}
9    :    {ax: 0, ay: 7}

Результаты для ax равны 0, что неверно и ay, очевидно, также неверно. Как я могу получить правильные числа, сохраненные в массиве, чтобы я мог продолжить построение данных с помощью d3.js версии 4?

M. Punt 12 июль 2018, в 20:02

Источник

0

Можете ли вы предоставить несколько строк из файла CSV? Два примера, которые вы привели для данных, выглядят по-разному (у второго есть пробел после ay), поэтому я не уверен, как это выглядит на самом деле. Вы можете попробовать поместить данные в GitHub в виде гистограммы, а затем разветвить этот JSfiddle ( jsfiddle.net/karmi/nbw7rsc6 ), чтобы он работал на вас. Хороший способ играть и просить помощи.
xrd 12 июль 2018, в 18:42
0

ax, ay, 1,40,50 2,41,49 3,39,52 4,35,49 5,34,46 6,33,45 7,32,42 8,30,40 9,29,32 10,27,26
M. Punt 12 июль 2018, в 19:03
0

Я поместил ваш CSV здесь: gist.github.com/xrd/… (необработанный файл gist.githubusercontent.com/xrd/9a73ccf7ac1e41b728202f3c70cdb959/… ). Скрипка в ответе ниже работает.
xrd 12 июль 2018, в 19:19
0

Возможно, вы захотите обновить свой заголовок, чтобы быть более ясным в отношении того, что вы хотите сделать, из вашего примера не совсем ясно, какова конечная цель, кроме правильного анализа файла CSV, который, я думаю, работает здесь так, как вы хотите.
xrd 12 июль 2018, в 19:20
0

Если один из ответов вам подходит, примите его в качестве ответа, нажав зеленую галочку.
xrd 13 июль 2018, в 15:01

Показать ещё 3 комментария

Теги:

javascript

d3.js

2 ответа

0

d3.csv('https://gist.githubusercontent.com/xrd/9a73ccf7ac1e41b728202f3c70cdb959/raw/9c3a1bde4dee9f0d5f80e705bb4f25353ea6b398/test.csv')
            .row(function (d){
                console.log( d );
                return {
                    ax: Number(d.ax),
                    ay: Number(d.ay)
                };
            })
            .get(function (error, data){
                console.log(data)
            });

Вы можете увидеть его здесь: http://jsfiddle.net/g3xfbL9m/9/ и, если вы откроете консоль, можете увидеть ее вывод в консоль с правильными значениями.

xrd 12 июль 2018, в 18:05

Ещё вопросы

Можете ли вы предоставить несколько строк из файла CSV? Два примера, которые вы привели для данных, выглядят по-разному (у второго есть пробел после ay), поэтому я не уверен, как это выглядит на самом деле. Вы можете попробовать поместить данные в GitHub в виде гистограммы, а затем разветвить этот JSfiddle ( jsfiddle.net/karmi/nbw7rsc6 ), чтобы он работал на вас. Хороший способ играть и просить помощи.
ax, ay, 1,40,50 2,41,49 3,39,52 4,35,49 5,34,46 6,33,45 7,32,42 8,30,40 9,29,32 10,27,26
Я поместил ваш CSV здесь: gist.github.com/xrd/… (необработанный файл gist.githubusercontent.com/xrd/9a73ccf7ac1e41b728202f3c70cdb959/… ). Скрипка в ответе ниже работает.
Возможно, вы захотите обновить свой заголовок, чтобы быть более ясным в отношении того, что вы хотите сделать, из вашего примера не совсем ясно, какова конечная цель, кроме правильного анализа файла CSV, который, я думаю, работает здесь так, как вы хотите.
Если один из ответов вам подходит, примите его в качестве ответа, нажав зеленую галочку.

Sanjay kumar · Accepted Answer · 2018-07-12T17-20-00.000Z

попробуй это

d3.csv("/data/employees.csv")
  .row(function(d) {
        return {
            age: d.age,
            name: d.name.toUpperCase() // converting name to upper case 
        }; 
   })
  .get(function(data) {
      console.log(data);
  });

введите ссылку здесь