加載json到d3.js中用於徑向樹狀圖

所以javascript新手在這裏，一直在敲我的頭如何讓JSON source json 加載到d3.js徑向樹狀圖中。位於：d3.js Radial Dendrogram graph example 加載json到d3.js中用於徑向樹狀圖

目前的計劃是導入JSON到蟒蛇或使用Python的JSON也許轉化成2列（ID，值）CSV。

但我很想了解如何實現這一點，因爲我已經在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

是我喜歡得到的那種輸出。

來源

2016-10-01 liskl

鑑於您的JSON，樹狀圖會是什麼樣子？ – Mark

編輯原始帖子以更好地解釋問題。 – liskl

我不會將我的'JSON'轉換爲'csv'只是爲了轉換回'JSON'。你應該問的真正的問題是如何將我的'JSON'重新格式化爲層次結構'd3'的需要。看看你鏈接到的例子，結構在''root'對象中，'{id：「flare」，children：[{id：「one」，children：[...' – Mark

剛剛從昨天回到這個問題。正如我在評論中所說的，您需要將您的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 });

完全跑步code。

來源

2016-10-02 15:08:28 Mark

加載json到d3.js中用於徑向樹狀圖

回答

相關問題