var links = [{ "source": "土地 正神", "target": "Earth" }, { "source": "利市 迊喜 仙官", "target": "Earth" }, { "source": "王 二爺 之 神", "target": "God of Wealth" }, { "source": "南天門 東廚 司命", "target": "Kitchen" }, { "source": "天地 三界 十方 萬靈 眞宰 [碑亭]", "target": "Pantheons" }, { "source": "玄壇 趙 元帥", "target": "Underworld" }, { "source": "玄壇 趙 元帥", "target": "Underworld" }, { "source": "威顯 關聖 大帝", "target": "Central Figures" }, { "source": "大 中華 民國 二十年 灶君 之 神位", "target": "Kitchen" }, { "source": "東廚 司命", "target": "Kitchen" }, { "source": "五路 之 神", "target": "Earth" }, { "source": "家宅 六神", "target": "Earth" }, { "source": "u財公 財母", "target": "God of Wealth" }, { "source": "管山 之 神", "target": "Earth" }, { "source": "水草 馬明王", "target": "Earth" }, { "source": "增 福 財神", "target": "God of Wealth" }, { "source": "增 福 財神", "target": "God of Wealth" }, { "source": "培姑 娘娘", "target": "Buddhas and Bodhisattvas" }, { "source": "龍王 之 神", "target": "Earth" }, { "source": "青龍 之 神", "target": "Earth" }, { "source": "白馬 先逢", "target": "Earth" }, { "source": "土公 土母", "target": "Earth" }, { "source": "黄河 金龍 四大王", "target": "Earth" }, { "source": "太上 老君", "target": "Heaven" }]; var nodes = {}; // Compute the distinct nodes from the links. links.forEach(function(link) { link.source = nodes[link.source] || (nodes[link.source] = { name: link.source, is_tag: false }); link.target = nodes[link.target] || (nodes[link.target] = { name: link.target, is_tag: true }); }); var svg = d3.select("#canvas") .attr("width", 800) .attr("height", 600); var force = d3.layout.force() .nodes(d3.values(nodes)) .links(links) .size([800, 600]) .linkDistance(80) .charge(-100) .gravity(0.05) .on("tick", tick) .start(); var link = svg.selectAll(".link") .data(force.links()) .enter().append("line") .attr("class", "link"); var node = svg.selectAll(".node") .data(force.nodes()) .enter().append("g") .attr("class", "node") .call(force.drag) var gs = svg.selectAll("g") .append("text") .attr("class", "txt") .attr("dx", 4) .attr("dy", ".35em") .text(function(d) { return d.name }); node.append("circle") .attr("r", function(d) { if (d.is_tag) { return 16; } else { return 8; } }) .style("fill", function(d) { if (d.is_tag) { return "#235e60"; } else { return "#7a9117"; } }) function tick() { 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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); }