D3JS: Как загрузить данные CSV и преобразовать его в объект NVD3.JS? -- jquery поле с участием csv поле с участием d3.js поле с участием key-value поле с участием nvd3.js пол Связанный проблема

D3js: How to load CSV data and convert it into nvd3.js object?


0
vote

проблема

русский

У меня есть запятая файл:

 <код>  dV,  dA, Model, Cell -1.5, -3.2,  B, xA -1.1, -2.3,  B, xB  1.2, -0.8,  B, xC  6.5,  2.7,  C, xA  7.4,  4.5,  C, xB  6.1,  3.3,  C, xC  24.6, 12.3, D, xA  25.2, 11.8, D, xB  29.9, 18.3, D, xC ...   

и хочу конвертировать, если в объект nvd3.js, где данные сгруппированы по значению столбца «Ячейка»:

 <код> {  key: value from "Cell" column,  values: {x: .., y: ..., shape: value from "Model" column},  ... }   

Для этого я использую следующий код:

 <код> function loadData(filename) {  var data = [],     shapes = {xA: 'circle', xB: 'square;' xC: 'cross']  d3.csv(filename, function(d) {     if ((data['key' === undefined) || (data.key[d.Cell] === undefined)) {         data.push{             key: d.Cell,             values: []         }     }     data.key[d.Cell].values.push({         x: +d.dV,         y: +d.dA,         size: 3,         shape: function(d) { return shapes[d.Model] || 'circle'; }     }) );  return data;  }   

Код не работает. Что не так в следующем коде, и как преобразовать данные CSV в объект NVD3.JS?

Английский оригинал

I have a comma separated file:

 dV,  dA, Model, Cell -1.5, -3.2,  B, xA -1.1, -2.3,  B, xB  1.2, -0.8,  B, xC  6.5,  2.7,  C, xA  7.4,  4.5,  C, xB  6.1,  3.3,  C, xC  24.6, 12.3, D, xA  25.2, 11.8, D, xB  29.9, 18.3, D, xC ... 

And want to convert if into nvd3.js object, where data is grouped by "Cell" column value:

{  key: value from "Cell" column,  values: {x: .., y: ..., shape: value from "Model" column},  ... } 

To do so I use the following code:

function loadData(filename) {  var data = [],     shapes = {xA: 'circle', xB: 'square;' xC: 'cross']  d3.csv(filename, function(d) {     if ((data['key' === undefined) || (data.key[d.Cell] === undefined)) {         data.push{             key: d.Cell,             values: []         }     }     data.key[d.Cell].values.push({         x: +d.dV,         y: +d.dA,         size: 3,         shape: function(d) { return shapes[d.Model] || 'circle'; }     }) );  return data;  } 

The code isn't work. What is wrong in the following code, and how to convert CSV data into nvd3.js object?

</div
              

Список ответов

1
 
vote

Несколько проблем с вашим кодом:

    .
  • javascript синтаксис

Образец размещена имеет ошибки синтаксиса JavaScript (опечатка в определении <код> shapes , проверка значения <код> data.key , <код> data.push ) - вы пытались Отладить JavaScript перед публикацией?

    .
  • файл csv имеет пробел

D3.js, Psv Parser не разбивает белое пространство, это особенно актуально в том, как вы используете D.cell для извлечения атрибута сотовой связи. D3.js разбирает его как «клетки», а не «клетки».

    .
  • Функция обратного вызова CSV Возвращает массив проанализированных строк, а не один ряд

Вам нужно обернуть код обработки ряд в <код> d.forEach(function(rowData) { /* your row processing here */ })

    .
  • Возвращение <код> data не отражает обратный вызов природы CSV

Ваш <код> return data; находится за пределами функции обратного вызова CSV. Таким образом, во всем, вероятно, будет вызываться до того, как функция CSV выполнила свою работу.

Вам необходимо изменить <код> loadData функцию как асинхронный шаблон. I.e: Пусть вызывающий абонент поставляет функцию обратного вызова, которая вызывается с обработкой <код> data выхода, в функции CSV.

    .
  • Дационализаторы не настроены правильно

Я считаю, что вы ищете ваши данные, которые будут возвращены в форме:

 <код> [ { key: 'xA', values: .... }, { key: 'xB', values: .... } .... ]   

IE: массив объектов, с каждым объектом, имеющим другой <код> key , соответствующий вашему адресу <код> data.key0 .

Тем не менее, ваш <код> data.key1 Проверка пытается проверить <код> data.key2 атрибута <код> data.key3 сама массива! Он не оценивает, есть ли объект в <код> data.key4 , который имеет <код> data.key5 атрибут.

Не обязательно проблема, в зависимости от вашей настройки NVD3.JS:

    .
  • <код> data.key6 Клавиша правильный?

Ваш <код> data.key7 lookup связан значениями <код> data.key8 , <код> data.key9 , <код> data.push0 . Из ваших поставляемых данных они соответствуют значениям data.push1 , однако вы проверяете <код> data.push2

    .
  • делает <код> data.push3 атрибут должен быть функцией?

Учитывая все остальные атрибуты - это прямые копии анализируемых CSV данных, <код> data.push4 подход для форм, вероятно, создает ненужные осложнения.

Просто установите его напрямую? <Код> data.push5

Разместить все вышеперечисленное вместе, я поставил образец кода вместе ниже, который иллюстрирует:

 <код> data.push6  
 

A few issues with your code:

  • Javascript Syntax

The sample posted has Javascript syntax errors (typo's in definition of shapes, checking value of data.key, data.push) - did you try and debug the javascript before posting?

  • CSV file has whitespace

D3.js's, CSV parser does not strip white-space, this is especially relevant in the way that you use d.Cell to extract the Cell attribute. D3.js parses it as ' Cell' and not 'Cell'.

  • CSV callback function returns an array of parsed rows, not a single row

You need to wrap your row processing code in a d.forEach(function(rowData) { /* your row processing here */ })

  • Returning of data doesn't reflect callback nature of CSV

Your return data; is outside of the CSV callback function. So in all probably will be called before the CSV function has done its job.

You need to change your loadData function to be an asynchronous pattern. i.e.: let the caller supply a callback function which is called with the processed data output, within the CSV function.

  • Dataseries not setup properly

I believe that you're looking for your data to be returned in the form:

[ { key: 'xA', values: .... }, { key: 'xB', values: .... } .... ] 

Ie: an array of objects, with each object having a different key corresponding to your Cell attribute.

However, your data.key[...] check is trying to check the key attribute on the data array itself! It is not evaluating whether there is an object within data that has a key attribute.

Not necessarily an issue, depending on your NVD3.js setup:

  • Is shapes key correct?

Your shapes lookup is keyed with values xA, xB, xC. From your supplied data, these correspond to values in Cell, however you are checking against d.Model

  • Does shapes attribute need to be a function?

Given all the other attributes are straight copies of the CSV parsed data, the function(d) approach for shapes is probably creating unnecessary complication.

Just set it directly? shape: shapes[d.Model] || 'circle'

Putting all of the above together, I put the sample of code together below that illustrates:

        loadData('data.csv', function(data) { console.log(data); });          function getOrCreateEntry(data, key) {             data.forEach(function(d) {                 if (d.key === key)                     return d;             });              var newEntry = { key: key, values: [] };              data.push(newEntry);              return newEntry;         }          function loadData(filename, cb) {              var data = [],                 shapes = {A: 'circle', B: 'square', C: 'cross'}              d3.csv(filename,function(csvData) {                 csvData.forEach(function(d) {                      cellEntry = getOrCreateEntry(data, d.Cell);                      cellEntry.values.push({                         x: +d.dV,                         y: +d.dA,                         size: 3,                         shape: shapes[d.Model] || 'circle'                     })                 });                  cb(data);             });         } 
</div
 
 
 
 

Связанный проблема

-2  Динамический фон WordPress на основе изображений слайдера  ( Dynamic wordpress background based on slider images ) 
Я использую NivoSlider на WordPress, и я хочу, чтобы фона моей домашней страницы измениться на основе текущего изображения слайда! У меня нет опыта работы в J...

2  Таблица Bootstrap в течение другого таблицы Bootstrap не сортируется  ( Bootstrap table within another bootstrap table not sortable ) 
У меня есть проект, который состоит из таблицы Bootstrap со многими строками, и каждая строка имеет раскрывающуюся кнопку, которая открывает подсуду. Я включи...

0  По какой-то причине мой нижний колонтитул не очень мобильный  ( For some reason my footer isnt very mobile friendly ) 
90% моего веб-сайта мобильнее (все равно размера), но по какой-то причине мой нижний колонтитул в основном полностью отрезан на мобильном телефоне. То, как ...

2  Это хорошая идея до $ .post в Google Spreadsheet?  ( Is it a good idea to post to google spreadsheet ) 
Я пытаюсь разработать функцию в моей веб-странице, которая посылает данные как можно добраться до доступа к центральному репозиторию позже. Было бы здорово, е...

0  Как создать элемент DOM в другой шаблон?  ( How to create a dom element to another template ) 
У меня есть пример сценария. Короче говоря - если вы нажмете на «Добавить» создают ряд новых элементов, так как он был заполнен полями. Используемый ионный. Н...

9  Ответ ASP.NET.redirect с jQuery Mobile - URL-хешированием  ( Asp net response redirect with jquery mobile url hashing ) 
У меня есть стандартные формы Auth Asp.net приложение. Моя регистрация и страница входа в систему находятся в одном файле .aspx с 2 мобильными страницами jQue...

0  Как сделать правильное меню JQuery Slide Down?  ( How to make proper jquery slide down menu ) 
Привет друзья! У меня есть проблема с slide down Меню, когда я первоначально нажимаю на <код> button (изображение), который работает <a id="js-cat" clas...

0  jQuery "Выбираемый" с фильтром "TD"  ( Jquery selectable with td filter ) 
У меня есть вопрос о <Код> selectable Функция в jQuery с "фильтром". в демо, я добавил какой-то код, можешь сказать мне, почему этот код не работает? В э...

-8  Как автоматически форматировать пользовательский ввод 4 цифры до последних 2 цифр  ( How to automatically format user input 4 digits to last 2 digits ) 
У меня есть текстовое поле срок действия к кредитным картам, который пользователь, способный ввести 4 цифры, но я хочу автоматически форматировать ввод пользо...

0  Переменные доступа в разных файлах HTML?  ( Access variables in different html files ) 
У меня есть 2 HTML-файлов, а 1 файл JS <код> index.html index1.html main.js в <Код> main.js У меня есть глобальный объект, как следует следующим образ...

6  Как отобразить несколько диапазонов даты между JQUERY DATE  ( How to display multiple date ranges between a date range jquery ) 
HI У меня есть дата Ranger Picker на этом, я хочу отобразить все диапазоны даты, определяемые для определенного диапазона даты, как это: Предположим, мой ди...

2  Slidedown и Slideup Looping Bug в Firefox  ( Slidedown and slideup looping bug in firefox ) 
http: ///www.quenity.com/post/1047/easy-to-style-jquery-drop-down-menu-tustorial#Comment-7912 У меня есть меню, точно так же, как одинарность, поэтому про...

3  Динамически изменить размер ввода  ( Dynamically resize input ) 
Мне просто интересно, как у вас динамически разместите вход, как вы введете в него ?? Я хотел бы использовать jQuery, если это возможно и AMP; Я бы предпоче...

-1  Отправить не возвращает желаемый результат в AJAX  ( Submit is not returning desired result in ajax ) 
<код> onTap0 Возвращает результат желания. Но если я сделаю это: <код> onTap1 не возвращает желаемый результат. Вместо того, чтобы возвращать данные в...

7  Объект IIFE и Window?  ( Iife and window object ) 
<Код> IIFE Что нужно получить доступ без переопределения <код> window объект - можно рассматривать как: что-то вроде ( jQuery Пример): <код> $(function...




© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.