{"id":3742,"date":"2014-09-11T07:09:02","date_gmt":"2014-09-10T22:09:02","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=3742"},"modified":"2014-09-11T07:09:02","modified_gmt":"2014-09-10T22:09:02","slug":"post-3742","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/3742","title":{"rendered":"\u3010D3.js\u3011Force-Directed Japan"},"content":{"rendered":"<p><a href=\"http:\/\/shimz.me\/example\/d3js\/geo_example3\/force\/index.html\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/09\/forcemap140911.png\" alt=\"Force-Directed Japan\" width=\"590\" height=\"370\" class=\"aligncenter size-full wp-image-3741 border\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/09\/forcemap140911.png 590w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/09\/forcemap140911-239x150.png 239w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/shimz.me\/example\/d3js\/geo_example3\/force\/index.html\">example<\/a><\/p>\n<p>\u300c<a href=\"http:\/\/bl.ocks.org\/mbostock\/1073373\">Force-Directed States of America<\/a>\u300d\u3092\u53c2\u8003\u306b\u65e5\u672c\u7248\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002<br \/>\n\u30b3\u30fc\u30c9\u306f\u307b\u307c\u53c2\u8003\u306b\u3057\u305f\u30b5\u30f3\u30d7\u30eb\u305d\u306e\u307e\u307e\u3067\u3059\u304c\u3001\u4e00\u5fdc\u8f09\u305b\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n<h2>\u30b5\u30f3\u30d7\u30eb<\/h2>\n<pre class=\"lang:js decode:true \" >d3.json(\"..\/..\/_geodata\/japan_light.geojson\", function(error, json) {\r\n\tif (error) return console.error(error);\r\n\tdraw(json);\t\r\n})\t\r\n\t\r\nfunction draw(json){\t\r\n\tvar width  = 1000;\r\n\tvar height = 1000;\r\n\t\r\n\tvar svg = d3.select(\"body\").append(\"svg\")\r\n\t    .attr(\"width\", width)\r\n\t    .attr(\"height\", height)\r\n\t    .append(\"g\")\r\n\t    .attr(\"transform\", \"translate(0,0)\");\r\n\t\r\n\tvar projection = d3.geo.mercator()\r\n\t\t.center([139.0032936, 36.3219088])\r\n\t\t.scale(2000)\r\n\t\t.translate([width\/2, height\/2]);\r\n\t\r\n\tvar path = d3.geo.path().projection(projection);\r\n\t\t\t\t\t\t\r\n\tvar nodes = [];\r\n\tvar links = [];\r\n\t\r\n\tjson.features.forEach(function(d, i) {\r\n\t\t\/\/\u5404\u9818\u57df\u306e\u4e2d\u5fc3\u70b9\u53d6\u5f97\r\n\t\tvar centroid = path.centroid(d);\r\n\t\tcentroid.x = centroid[0];\r\n\t\tcentroid.y = centroid[1];\r\n\t\tcentroid.feature = d;\r\n\t\tnodes.push(centroid);\t\/\/\u30ce\u30fc\u30c9\u30c7\u30fc\u30bf\u3092\u751f\u6210\r\n\t});\r\n\r\n\t\/\/\u30ce\u30fc\u30c9\u30c7\u30fc\u30bf\u304b\u3089\u3001\u30c9\u30ed\u30cd\u30fc\u4e09\u89d2\u5206\u5272\u30c7\u30fc\u30bf\u3092\u751f\u6210\t\t\r\n\tvar triangles = d3.geom.voronoi().triangles(nodes);\r\n\t\t\r\n\t\ttriangles.forEach(function(d,i){\r\n\t\t\t\/\/\u5404\u4e09\u89d2\u5f62\u306e\u9802\u70b9\u304b\u3089\u30bd\u30fc\u30b9\u30dd\u30a4\u30f3\u30c8\u3001\u30bf\u30fc\u30b2\u30c3\u30c8\u30dd\u30a4\u30f3\u30c8\u3001\uff12\u70b9\u306e\u8ddd\u96e2\u3092\u30ea\u30f3\u30af\u30c7\u30fc\u30bf\u3068\u3057\u3066\u4fdd\u5b58\r\n\t\t\tlinks.push( edge( d[0] , d[1] ) );\r\n\t\t\tlinks.push( edge( d[1] , d[2] ) );\r\n\t\t\tlinks.push( edge( d[2] , d[0] ) );\r\n\t\t});\r\n\t\t\r\n\t\t\/\/console.log(nodes);\r\n\t\t\/\/console.log(links);\r\n\t\t\r\n\t\t\/\/\u529b\u5b66\u30b0\u30e9\u30d5\u751f\u6210\r\n\t\tvar force = d3.layout.force().size([width, height]);\t\t\r\n\t\tforce.gravity(0.01)\r\n\t\t\t.charge(0.01)\r\n\t\t\t.nodes(nodes)\r\n\t\t\t.links(links)\r\n\t\t\t.linkDistance(function(d){ return d.distance; })\r\n\t\t\t.start();\r\n\t\t\r\n\t\t\/\/\u30ce\u30fc\u30c9(\u5730\u5f62)\u306e\u63cf\u753b\r\n\t\tvar node = svg.selectAll(\"g\")\r\n\t\t\t.data(nodes)\r\n\t\t\t.enter()\r\n\t\t\t.append(\"g\")\r\n\t\t\t.attr(\"transform\", function(d) { return \"translate(\" + -d.x + \",\" + -d.y + \")\"; })\r\n\t\t\t.call(force.drag) \/\/force\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30c9\u30e9\u30c3\u30b0\u30d3\u30d8\u30a4\u30d3\u30a2\u3092\u8a2d\u5b9a\r\n\t\t\t\/\/\u5730\u5f62\u63cf\u753b\r\n\t\t\t.append(\"path\")\r\n\t\t\t.attr({\r\n\t\t\t\t\"transform\": function(d) { return \"translate(\" + d.x + \",\" + d.y + \")\"; },\r\n\t\t\t\t\"stroke\": \"#ccc\",\r\n\t\t\t\t\"stroke-width\": 1,\r\n\t\t\t\t\"fill\": \"green\",\r\n\t\t\t\t\"d\": function(d){ return path(d.feature) }\r\n\t\t\t});\t\t\t\t\t\t\r\n\t\t\r\n\t\t\/\/\u30e9\u30a4\u30f3(\u5730\u5f62\u3092\u7d50\u3076\u7dda)\u306e\u63cf\u753b\r\n\t\tvar link = svg.selectAll(\"line\")\r\n\t\t\t.data(links)\r\n\t\t\t.enter()\r\n\t\t\t.append(\"line\")\r\n\t\t\t.attr({\r\n\t\t\t\t\"class\": \"link\",\r\n\t\t\t\t\"x1\":function(d){ return d.source.x },\r\n\t\t\t\t\"y1\":function(d){ return d.source.y },\r\n\t\t\t\t\"x2\":function(d){ return d.target.x },\r\n\t\t\t\t\"y2\":function(d){ return d.target.y },\r\n\t\t\t})\r\n\t\t\r\n\t\t\/\/\u529b\u5b66\u30b0\u30e9\u30d5\u306e\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u51e6\u7406\r\n\t\t force.on(\"tick\", function() {\r\n\t\t\t    link.attr({\r\n\t\t\t\t\t\"class\": \"link\",\r\n\t\t\t\t\t\"x1\":function(d){ return d.source.x },\r\n\t\t\t\t\t\"y1\":function(d){ return d.source.y },\r\n\t\t\t\t\t\"x2\":function(d){ return d.target.x },\r\n\t\t\t\t\t\"y2\":function(d){ return d.target.y },\r\n\t\t\t\t});\r\n\t\t\t   node.attr(\"transform\", function(d) {\r\n\t\t\t\t\treturn \"translate(\" + d.x + \",\" + d.y + \")\";\r\n\t\t\t   });\r\n\t\t});\r\n\t\t\t\t\r\n\tfunction edge(a, b) {\r\n\t\tvar dx = a[0] - b[0], dy = a[1] - b[1];\r\n\t\treturn {\r\n\t\t\tsource: a,\r\n\t\t\ttarget: b,\r\n\t\t\tdistance: Math.sqrt(dx * dx + dy * dy)\r\n\t\t};\r\n\t}\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>example \u300cForce-Directed S&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3741,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-3742","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3-js","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3742","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=3742"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3742\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/3741"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=3742"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=3742"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=3742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}