D3.js是一個基于數(shù)據(jù)驅(qū)動的JavaScript庫，它可以用來創(chuàng)建可交互的動態(tài)數(shù)據(jù)可視化。其中之一的功能就是可以通過json layout來創(chuàng)建可視化。

var width = 500, height = 300;
var cluster = d3.layout.cluster()
.size([height, width - 100]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(40,0)");
d3.json("data.json", function(error, root) {
var nodes = cluster.nodes(root),
links = cluster.links(nodes);
var link = svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal);
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
node.append("circle")
.attr("r", 4.5);
node.append("text")
.attr("dx", function(d) { return d.children ? -8 : 8; })
.attr("dy", 3)
.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.name; });
});

上述代碼可以通過D3.js中的cluster布局函數(shù)和svg路徑生成函數(shù)來動態(tài)創(chuàng)建一個數(shù)據(jù)可視化圖表。首先定義整體畫布的寬高，再定義cluster布局的大小，之后通過json數(shù)據(jù)來實現(xiàn)節(jié)點的創(chuàng)建和連接，最后通過circle和text元素展示節(jié)點和節(jié)點的文本內(nèi)容。