загрузить json в d3.js для использования в радиальной дендрограмме

#javascript #json #d3.js

#javascript #json #d3.js

Вопрос:

итак, новичок в javascript, я ломал голову над тем, как загрузить исходный код JSON json в d3.js График радиальной дендрограммы. находится здесь: d3.js Пример графа радиальной дендрограммы

текущий план состоит в том, чтобы импортировать JSON в python или, возможно, преобразовать json в 2 столбца (идентификатор, значение) csv с использованием python.

но я хотел бы понять, как это можно сделать, поскольку я ломал голову над javascript и d3.js уже почти 2 дня.

По сути, я пытаюсь загрузить данные в d3.js чтобы обеспечить визуализацию следующего

с корневой системой

РЕДАКТИРОВАТЬ: чтобы показать обнадеживающий поток усиков

 system --> model_type --> system_revision --> firmware_version --> firmware_build, system_name
  

чтобы следовать примеру csv, приведенному в ссылке выше.

 id,value
systems,
systems_PowerEdge R720xd,
systems_PowerEdge R720xd_I,
systems_PowerEdge R720xd_I_1.50.50,
systems_PowerEdge R720xd_I_1.50.50_34,ldc0000
  

это тот результат, который я хотел бы получить.

Ответ №1:

Просто возвращаюсь к этому вопросу со вчерашнего дня. Как я уже говорил в своем комментарии, вам необходимо преобразовать вашу структуру JSON в иерархию родительских / дочерних элементов, требуемую d3.hierarchy. К сожалению, ваши исходные данные на самом деле не являются иерархическими, поэтому я вижу единственный способ сделать это очень вручную:

 var root = {
    id: "system",
    children: []
  };
  data.systems.forEach(function(d,i){
    var key = Object.keys(d)[0],
        sysInfo = d[key].sysInfo;
    root.children.push({
      id: sysInfo.system_model,
      children: [{
        id: sysInfo.system_revision,
        children: [{
          id: sysInfo.firmware_version,
          children: [{
            id: sysInfo.firmware_build
          }, {
            id: key
          }]
        }]
      }]
    });
  });

  root = d3.hierarchy(root);
  

После этого код дендрограммы остается неизменным, за исключением исправления текстовых меток:

 .text(function(d) { console.log(d); return d.data.id });
  

Полный рабочий код.