Qiita API document<\/a><\/p>\n\u95a2\u4fc2\u6027(\u30d5\u30a9\u30ed\u30fc\u306e\u72b6\u614b)\u3092 Force Layout\u306b\u3057\u3066\u307f\u307e\u3057\u305f\u304c\u3001\u3076\u3063\u3061\u3083\u3051\u3042\u307e\u308a\u898b\u3084\u3059\u304f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n
\u5206\u304b\u308a\u6613\u304f\u8868\u793a\u3059\u308b\u306a\u3089\u3001\u3082\u3063\u3068\u5225\u306e\u8868\u73fe\u3092\u4f7f\u7528\u3057\u305f\u65b9\u304c\u3088\u3055\u305d\u3046\u3067\u3059\u306d\u3002<\/p>\n
\u30b5\u30f3\u30d7\u30eb<\/h2>\n
path\u306e\u5148\u982d\u306b\u77e2\u5370\u3092\u4ed8\u3051\u308b\u306e\u3068\u3001\u30a2\u30a4\u30b3\u30f3\u753b\u50cf\u3092\u4e38\u304f\u5207\u308a\u53d6\u308b\u306e\u306b\u3001svg\u306edef\u8981\u7d20\u3068clipPath\u8981\u7d20\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\n<svg>\n<clipPath id="cut-off-circle">\n <circle cx=0 cy=0 r=15 \/>\n<\/clipPath> \n<defs>\n <marker id="licensing" viewBox="0 -5 10 10" refX="15" refY="-1.5" markerWidth="6" markerHeight="6" orient="auto">\n\t<path d="M0,-5L10,0L0,5"><\/path>\n <\/marker>\n<\/defs>\n<\/svg><\/pre>\nd3.json('links.json', function(d){\n\tvar links = d;\n\tvar nodes = {};\n\n\tlinks.forEach(function(link) { \n\t\tlink.source = nodes[link.node1] || (nodes[link.node1] = {name: link.node1});\n\t\tlink.target = nodes[link.node2] || (nodes[link.node2] = {name: link.node2, pref: link.node2_prf});\n\t});\n\n\tnodes['_shimizu']['pref'] = {url_name: "_shimizu", profile_image_url:"https:\/\/si0.twimg.com\/profile_images\/604833171\/twitter_bigger_normal.jpg"};\n\n\tvar graph = {nodes:nodes, links:links};\n\n\td3draw(graph);\n});\n\n\nfunction d3draw(graph) {\n\n\tvar w = 1200;\n\tvar h = 1200;\n\n\tvar force = d3.layout.force()\n\t\t.nodes(d3.values(graph.nodes))\n\t\t.links(graph.links)\n\t\t.size([w, h])\n\t\t.gravity(0)\n\t\t.linkDistance(300)\n\t\t.linkStrength(1)\n\t\t.charge(-50)\n\t\t.on("tick", tick)\n\t\t.start();\n\n\tvar svg = d3.select("svg")\n\t\t.attr({\n\t\t\t"width": w,\n\t\t\t"height": h\n\t\t});\n\n\t\/\/\u30d5\u30a9\u30ed\u30fc\u72b6\u614b\u3092\u793a\u3059path\u3092\u8ffd\u52a0\n\tvar path = svg.append("g").selectAll("path")\n\t\t.data(force.links())\n\t\t.enter()\n\t\t.append("path")\n\t\t.attr({\n\t\t\t"class": "link licensing",\n\t\t\t"marker-end": "url(#licensing)"\n\t\t});\n\n\t\/\/\u30e6\u30fc\u30b6\u30fc\u30a4\u30e1\u30fc\u30b8\u8ffd\u52a0\n\tvar userImg = svg.append("g").selectAll("a")\n\t\t.data(force.nodes())\n\t\t.enter()\n\t\t.append("a")\n\t\t.attr({\n\t\t\t"xlink:href": function(d){ return "http:\/\/qiita.com\/" + d.pref.url_name },\n\t\t\t"target":"_blank"\n\t\t})\n\t\t.append("image")\n\t\t.attr({\n\t\t\t"class": "userImg",\n\t\t\t"xlink:href": function(d){ return d.pref.profile_image_url }, \/\/\u30ce\u30fc\u30c9\u7528\u753b\u50cf\u306e\u8a2d\u5b9a\n\t\t\t"x": "-15px",\n\t\t\t"y": "-15px",\n\t\t\t"width": "30px",\n\t\t\t"height": "30px",\n\t\t\t"clip-path": "url(#cut-off-circle)"\n\t\t})\n\t\t.call(force.drag);\n\n\t\/\/\u30e6\u30fc\u30b6\u30fc\u540d\u30e9\u30d9\u30eb\u8ffd\u52a0\n\tvar label = svg.append("g").selectAll("g")\n\t\t.data(force.nodes())\n\t\t.enter()\n\t\t.append("g");\n\n\tlabel.append("text") \/\/\u30e9\u30d9\u30eb\u7e01\u53d6\u308a\n\t\t.attr({\n\t\t\t"x": 8,\n\t\t\t"y": ".51em",\n\t\t\t"class": "shadow"\n\t\t})\n\t\t.text(function(d) { return d.name; });\n\n\tlabel.append("text") \/\/\u30e9\u30d9\u30eb\u672c\u6587\n\t\t.attr({\n\t\t\t"x": 8,\n\t\t\t"y": ".51em"\n\t\t})\n\t\t.text(function(d) { return d.name; });\n\n\t\/\/\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u51e6\u7406\n\tfunction tick() {\n\t\tpath.attr("d", function(d) {\n\t\t\tvar dx = d.target.x - d.source.x;\n\t\t\tvar dy = d.target.y - d.source.y;\n\t\t\tvar dr = Math.sqrt(dy* dy+ dx*dx);\n\t\t\treturn "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;\n\t\t});\n\n\t\tuserImg.attr("transform", function(d) {\n\t\t\treturn "translate(" + d.x + "," + d.y + ")";\n\t\t});\n\n\t\tlabel.attr("transform", function(d) {\n\t\t\treturn "translate(" + d.x + "," + d.y + ")";\n\t\t});\n\t}\n\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"\u2026\u2026\u5931\u6557\u304b\u306a\u3002 example \u5404\u30e6\u30fc\u30b6\u30fc\u306e\u30d5\u30a9\u30ed…<\/p>\n","protected":false},"author":1,"featured_media":3162,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,51],"tags":[],"class_list":["post-3161","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3-js","category-datavis","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/comments?post=3161"}],"version-history":[{"count":1,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3161\/revisions"}],"predecessor-version":[{"id":3163,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3161\/revisions\/3163"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/3162"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=3161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=3161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=3161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"qiitagraph\"](\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/11\/qiitagraph.jpg\")
<\/a><\/p>\n