将json加载到d3.js中以用于径向树状图

Question

so javascript newbie here, been banging my head on how to get JSON source json loaded into d3.js Radial Dendrogram graph. located here: d3.js Radial Dendrogram graph example

the current plan is to import JSON into python or maybe convert the json into a 2 column (id,value) csv using python.

but i would love to understand the how this can be accomplished as i've been banging my head on javascript and d3.js for almost 2 days now.

Basically i'm trying to load the data into d3.js to allow the visualization of the following

with the root being system

EDIT: to show the hopeful tendril flow

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

to follow the example csv given in the link above.

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

is the kind of output i would love to get.

Answer 1

Just coming back to this question from yesterday. As I said in my comment, you need to convert your JSON structure to the parent/child hierarchy required by d3.hierarchy . Unfortunately, your source data is not really hierarchical at all, so the only way I see to do this is in a very manual manner:

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);

After that the dendrogram code remains unchanged except for fixing the text labels:

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

---

Full running code .