d3.js:cluster

うまくいかない

D3.js v4/v5 cluster 使い方 – サンプル – データビジュアライゼーション・ラボ

code:d3script.css

.link {

fill: none;

stroke: #555;

stroke-opacity: 0.4;

stroke-width: 1.5px;

}

code:d3script.js

// 2. 描画用のデータ準備

//var width = document.querySelector("svg").clientWidth;

//var height = document.querySelector("svg").clientHeight;

var width = 800;

var height = 600;

var data = {

"name": "A",

"children": [

{ "name": "B" },

{

"name": "C",

"children": "name": "D" }, { "name": "E" }, { "name": "F" }

{ "name": "G" },

{

"name": "H",

"children": "name": "I" }, { "name": "J" }

{ "name": "K" }

]

};

// 3. 描画用のデータ変換

root = d3.hierarchy(data);

var cluster = d3.cluster()

.size(height, width - 160)

// .nodeSize(50,300) ;

// .separation(function(a, b) { return(a.parent == b.parent ? 1 : 2); });

cluster(root);

// 4. svg要素の配置

g = d3.select("svg").append("g").attr("transform", "translate(80,0)");

var link = g.selectAll(".link")

.data(root.descendants().slice(1))

.enter()

.append("path")

.attr("class", "link")

.attr("d", function(d) {

return "M" + d.y + "," + d.x +

"C" + (d.parent.y + 100) + "," + d.x +

" " + (d.parent.y + 100) + "," + d.parent.x +

" " + d.parent.y + "," + d.parent.x;

});

var node = g.selectAll(".node")

.data(root.descendants())

.enter()

.append("g")

.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

node.append("circle")

.attr("r", 8)

.attr("fill", "#999");

node.append("text")

.attr("dy", 3)

.attr("x", function(d) { return d.children ? -12 : 12; })

.style("text-anchor", function(d) { return d.children ? "end" : "start"; })

.attr("font-size", "200%")

.text(function(d) { return d.data.name; });

実行動いたり、動かなかったり

#d3.js-term

https://img.shields.io/badge/D3.js-cluster-F9A03C.svg?logo=D3.js&style=for-the-badge