我想將像packageJson這樣的json資料轉換為適合樹形圖的層次格式
使用d3.hierarchy來轉換物件。
正如我所理解的那樣
每個包含嵌套資料的屬性
都需要使用內部的輔助函式進行轉換，比如
const test
const test = d3.hierarchy(packageJson, d => d.scripts);
是通過查找每個屬性的嵌套物件來轉換packageJson的唯一方法
或者是否有任何我不知道的D3輔助函式來完成這個任務？
const fam = d3.hierarchy（{
name: "root",
children: [
{name: "child #1"}。
{
name: "child #2",
children: [
{name: "孫子#1"/span>}。
{name: "孫子#2"}。
{name: "孫子#3"}, {name: "孫子#3"}.
]
}
]
})
// transform json
const packageJson = {
"name": "visualze-data",
"版本": "0.1.0"。
"私有": true。
"scripts": {
"service": "vue-cli-service"。
"build": "vue-cli-service build"。
"lint": "vue-cli-service lint"。
},
"dependencies": {
"core-js": "^3.6.5",
"d3-color": "^3.0.1",
"d3-hierarchy": "^3.0.1",
"d3-selection": "^3.0.0",
"d3-shape": "^3.0.1",
"vue": "^3.0.0".
},
"devDependencies": {
"@vue/cli-plugin-babel"。"~4.5.0"。
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0".
},
"eslintConfig": {
"root": true,
"env": {
"node": true。
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"。
],
"parserOptions": {
"parser": "babel-eslint"。
},
"rules": {}.
},
"browserslist": [
"> 1%",
"最近2個版本"。
"not dead".
]
}
const test = d3.hierarchy(packageJson, d => d.scripts)。
console.log（test） #limit {
max-width: 100px;
}<script src="https://cdnjs. cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>/span>
<div id="limited">
</div>/span>uj5u.com熱心網友回復：
最簡單的方法是創建一個包含所有子屬性的陣列，作為d3.hierarchy使用的子陣列：
let root = d3.hierarchy(packageJson, function(d) {
if(typeof d == "object" )
return Object.keys（d）。 map(k=>{ return d[k]; }) 。
})
我們需要檢查該屬性是否是一個物件(/array)而不是文本，否則我們將拉出標記葉子節點的字串的鍵。
這并不是最令人滿意的結果：沒有節點有名字。我們可以通過根據其父輩給它們的屬性名稱給節點命名來解決這個問題（根仍然是無名的，但這很容易糾正）：
我們可以通過給節點命名來解決這個問題。
let root = d3.hierarchy(packageJson, function(d) {
if(typeof d == "object" )
return Object.keys（d）。 filter(d=>/span>d! ="$name").map(k=> {
if(typeof d[k] == "object") d[k].$name = k。
else d[k] = k " : " d[k] 。
return d[k];
});
})
$name屬性跟蹤非葉子節點的名稱（因為這些是物件，我們可以直接添加一個屬性），它被children陣列生成器過濾掉了。由于葉子節點是字串，我只是修改它們以反映屬性名稱和值：它們的值位于d.data，而非葉子節點的名稱位于d.data.$name.
。根據你所期望的結果，你可能喜歡也可能不喜歡上述方法。但是為了演示，它顯示在下面：
下面是個例子。
下面是一個演示：
。const packageJson = {
"name": "visualze-data",
"版本": "0.1.0"。
"私有"。true。
"scripts": {
"service": "vue-cli-service"。
"build": "vue-cli-service build"。
"lint": "vue-cli-service lint"。
},
"dependencies": {
"core-js": "^3.6.5",
"d3-color": "^3.0.1",
"d3-hierarchy": "^3.0.1",
"d3-selection": "^3.0.0",
"d3-shape": "^3.0.1",
"vue": "^3.0.0".
},
"devDependencies": {
"@vue/cli-plugin-babel"。"~4.5.0"。
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0".
},
"eslintConfig": {
"root": true,
"env": {
"node": true。
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"。
],
"parserOptions": {
"parser": "babel-eslint"。
},
"rules": {}.
},
"browserslist": [
"> 1%",
"最近2個版本"。
"not dead".
]
}
let root = d3.hierarchy（packageJson, function(d) {
if(typeof d == "object" )
return Object.keys（d）。 filter(d=>/span>d! ="$name").map(k=> {
if(typeof d[k] == "object") d[k].$name = k。
else d[k] = k " : " d[k] 。
return d[k];
});
})
var width = 600;
var height = 300;
margin = {left: 10, top: 10, right: 50, bottom: 50}。
var svg = d3.select("body"/span>).append("svg"/span>)
.attr("width", width)
.attr("height", height)。
var g = svg.append("g") 。 attr('transform','translate(' margin. left ',' margin.right '）'）。)
var tree = d3.tree()
.size([height-margin.top-margin。 bottom,width-margin.left-margin.right] ）。)
var link = g.selectAll(" .link")
.data(tree(root).links()
.enter().append("path"/span>)
.attr("class"/span>, "link")
.attr("d", d3.linkHorizontal()
.x(function(d) { returnd.y; })
.y(function(d) { returnd.x; }) 。)
var node = g.selectAll(" .node")
.data（root.descendants()
.enter().append("g"/span>)
. attr("class", function(d) { return "node" (d. children ? " node-internal" : " node-leaf") ; })
. attr(" transform", function(d) { return "translate(" d. y "," d.x ") "; })
node.append("圓")
.attr("r", 2.5) 。
node.append("text")
.text(function(d) { return d。 data.$name || d.data; })
.attr('y', -10)
.attr('x'/span>,-10)
.attr('text-anchor','middle'); .node circle {
填充。#fff;
描邊：鋼藍色。
stroke-width: 3px;
}
.link {
填充：無。
描邊。#ccc;
stroke-width: 2px;
}<script src="https://cdnjs. cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> 轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/331505.html
標籤：