Как преобразовать данные таблицы в узлы и ссылки для d3js Sankey - PullRequest
Новая
       24

Как преобразовать данные таблицы в узлы и ссылки для d3js Sankey

0 голосов
/ 31 января 2019

У нас есть проект, в котором мы работаем с несколькими тысячами изделий в несколько этапов.Я хочу создать диаграмму Санки для нескольких групп, чтобы помочь визуализировать, где мы находимся в процессе.Это для запуска в браузере и на стороне клиента javascript.Я последовал этой демонстрации и запустил ее.

Проблема, с которой я сталкиваюсь, состоит в том, как превратить мою таблицу данных в ссылки и узлы, необходимые для диаграммы Санки.В этом примере данные, передаваемые на диаграмму, организованы следующим образом: 

{ "nodes":[
    {"node":0,"name":"node0"},
    {"node":1,"name":"node1"},
    {"node":2,"name":"node2"},
    {"node":3,"name":"node3"},
    {"node":4,"name":"node4"}
],
"links":[
    {"source":0,"target":2,"value":2},
    {"source":1,"target":2,"value":2},
    {"source":1,"target":3,"value":2},
    {"source":0,"target":4,"value":2},
    {"source":2,"target":3,"value":2},
    {"source":2,"target":4,"value":2},
    {"source":3,"target":4,"value":4}
]}

Я начинаю с необработанных данных элемента для каждого элемента в нашем проекте, и каждый элемент будет иметь следующее (для ясности обрезано) список столбцов и пример значений: 

ID  Process  Owner   Decision  Status
01  quick    group1  retire    done
02  standard group2  replace   working
03  quick    none    none      hold
04  quick    group2  retire    working

Есть несколько других столбцов и значений для каждого, но я думаю, что это дает представление.Это исходит из ajax и в формате json (не столбцы фиксированной ширины), но это общая структура.

Как мне преобразовать это в ссылки и узлы?

Я нашел этот поток , который задает то же самое (я думаю), но для R, и у меня нет достаточного опыта с этим, чтобы следовать за ответом.

Я гуглил для ответов.Большинство учебных пособий, которые я нашел, предполагают, что у вас есть данные в формате узла / ссылок.И, как и в приведенном выше потоке, я обнаружил пару, говорящую о R, php или SQL для преобразования данных в узлы и ссылки - я ничего не понимаю.

Данные меняются ежечасно, и яЯ хочу, чтобы это можно было загрузить только для тех, кто хочет проверить в любое время.Поэтому мне нужно автоматизированное решение.

У меня есть необработанные данные и модель для создания диаграммы.Мне просто не хватает, как программно конвертировать данные.

EDIT

У меня уже есть необработанные данные в коде.Это не проблема.Проблема в том, что все учебники предполагают, что у вас уже есть узлы и ссылки.У меня есть одна строка для каждого элемента.Это не одно и то же.Мне не нужна помощь с JSON, AJAX или загрузкой файлов.Я ценю предложения, но они совершенно не в том направлении.

1 Ответ

0 голосов
/ 31 января 2019

Обновление

Вот полная рабочая диаграмма Санки с вашими данными: Диаграмма Санки из нескольких столбцов csv

На основании дополнительной информацииТребования и улучшения кодов Я придумал это: 

  var keys = Object.keys(data[0]); //get the headers for the data
  keys.splice(keys.indexOf('ID'), 1)//remove the IDs key

  data.forEach(function(d){
    keys.forEach(function (key, i){
      if (d[key]!="none") { adduniquenodes(d[key]); } //add node if not "none"
        var c = 1; //checks next column to the i
        if (d[keys[i+c]]!= undefined && d[key] !== "none"){
          while (d[keys[i+c]] === "none"){
            c = c+1;     //jump to next column if "none" found
           }
          graph.links.push ({
            "source" : d[key],
            "target" : d[keys[i+c]],
            "value" : countvalues(key,d[key],keys[i+c],d[keys[i+c]]) 
          });
        }
      })
  });

function adduniquenodes(value) {
      if (graph.nodes.indexOf(value) === -1){
        graph.nodes.push(value);
      }
}

function countvalues (sourcekey, source, targetkey, target) {
      var c = 0;
      data.forEach (function (d){
        if (d[sourcekey] === source && d[targetkey]===target){
          c++;
        }

      });
      return c;
 }
 console.log(graph);

Первый ответ:

Может быть, это поможет: Следующий код помещает каждый процесс, Владелец, Решение и Статус как уникальные узлы, а также ссылки.

Обратите внимание, что вы еще не уверены, какое значение вы хотите, поэтому я поставил 1 в качестве значения. 

  graph = {"nodes" : [], "links" : []};
    data.forEach(function(d){
      adduniquenodes(d.Process);
      adduniquenodes(d.Owner);
      adduniquenodes(d.Decision);
      adduniquenodes(d.Status);
      graph.links.push ( {"source" : d.Process,
                            "target" :d.Owner,
                          "value" : countvalues('Process',d.Process,'Owner',d.Owner)                         
                         });
      graph.links.push ( {"source" : d.Owner,
                          "target" :d.Decision,
                          "value" : countvalues('Owner',d.Owner,'Decision',d.Decision)                       
                         });
      graph.links.push ( {"source" : d.Decision,
                          "target" :d.Status,
                          "value" : countvalues('Decision',d.Decision,'Status',d.Status)                        
                         });
    });

    function adduniquenodes(value) {
      if (graph.nodes.indexOf(value) === -1){
        graph.nodes.push(value);
      }
    }

    function countvalues (sourcekey, source, targetkey, target) {
      var c = 0;
      data.forEach (function (d){
        if (d[sourcekey] === source && d[targetkey]===target){
          c++;
        }
      });
      return c;
      }
console.log(graph);
...