d3.js是一款非常優秀的JavaScript庫，它可以讓我們輕松地創建美麗的數據可視化界面。其中，可以使用json格式的數據來畫關系圖。接下來，我們就來學習如何通過d3.js和json數據來畫出優雅的關系圖。

示例代碼：
var width = 600,
height = 500;
var nodes = [],
links = [];
d3.json("data.json", function(error, graph) {
if (error) throw error;
graph.nodes.forEach(function(node) {
nodes.push(node);
});
graph.links.forEach(function(link) {
link.source = nodes[link.source];
link.target = nodes[link.target];
links.push(link);
});
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.size([width, height])
.linkDistance(100)
.charge(-200)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link")
.data(links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
node.append("title")
.text(function(d) { return d.name; });
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});

在這段代碼中，我們首先定義了一些變量，比如畫布的寬高，以及存儲節點和鏈接的數組。接著使用d3.json()方法來讀取json格式的數據，將每個節點和鏈接分別存儲到對應的數組中。然后，我們使用layout.force()方法來創建一個力導向圖，并給力導向圖的一些屬性賦值。我們把畫布添加到網頁上，并使用selectAll()和data()方法來生成鏈接和節點。最后，在force的tick事件中，更新鏈接和節點的坐標。這樣，就完成了我們的關系圖。

總的來說，d3.js是一款非常適合用來進行數據可視化的JavaScript庫，而使用json格式的數據來畫出關系圖更是非常方便。希望以上的代碼能夠對大家有所幫助。