{"id":948,"date":"2012-06-19T15:12:13","date_gmt":"2012-06-19T06:12:13","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=948"},"modified":"2017-09-12T15:11:01","modified_gmt":"2017-09-12T06:11:01","slug":"post-948","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3v4\/948","title":{"rendered":"\u3010D3.js\u3011 \u529b\u5b66\u30e2\u30c7\u30eb"},"content":{"rendered":"

\"\"<\/a>
\n\u3088\u304f\u898b\u304b\u3051\u308b\u308f\u308a\u306b\u3001\u6b63\u5f0f\u306a\u540d\u79f0\u3092\u77e5\u3089\u306a\u304b\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u4e0a\u8a18\u306e\u3088\u3046\u306a\u56f3\u3092\u300c\u529b\u5b66\u30e2\u30c7\u30eb (\u30b0\u30e9\u30d5\u63cf\u753b\u30a2\u30eb\u30b4\u30ea\u30ba\u30e0)\u300d\u306a\u3069\u3068\u8a00\u3046\u3089\u3057\u3044\u3067\u3059\u3002<\/p>\n

d3.js\u3067\u306f\u3001\u529b\u5b66\u30e2\u30c7\u30eb\u3092\u63cf\u753b\u3059\u308b\u305f\u3081\u306e\u30b7\u30e5\u30df\u30ec\u30fc\u30bf\u30fc\u3001d3-force\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n

d3-force<\/a><\/p>\n

\u30b5\u30f3\u30d7\u30eb<\/h2>\n

\"globe<\/a><\/p>\n

example<\/a><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset=\"utf-8\" \/>\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\/>\r\n    <title>force simulation - globe<\/title>\r\n    <style>\r\n      #graph {\r\n        width: 940px;\r\n        height: 460px;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"btn\">    \r\n      <button data-fn=\"addENode\">E\u30ce\u30fc\u30c9\u8ffd\u52a0<\/button>    \r\n      <button data-fn=\"deleteDLinkNode\">D\u30ce\u30fc\u30c9\u30fb\u30ea\u30f3\u30af\u524a\u9664<\/button>    \r\n      <button data-fn=\"addACLink\">AC\u30ea\u30f3\u30af\u8ffd\u52a0<\/button>    \r\n      <button data-fn=\"deleteBCLink\">BC\u30ea\u30f3\u30af\u524a\u9664<\/button>    \r\n    <\/div>\r\n    <div id=\"graph\"><\/div>    \r\n\r\n\r\n    <script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/4.1.1\/d3.min.js\"><\/script>    \r\n    <script>\r\n      \/\/\u63cf\u753b\u30a8\u30ea\u30a2\u306e\u30b5\u30a4\u30ba\u3092\u53d6\u5f97\u3059\u308b    \r\n      var w = document.querySelector(\"#graph\").clientWidth\r\n      var h = document.querySelector(\"#graph\").clientHeight\r\n\r\n      \/\/svg\u30a8\u30ec\u30e1\u30f3\u30c8\u306e\u521d\u671f\u5316\r\n      var svg = d3.select(\"#graph\")\r\n      .append(\"svg\")\r\n      .attr(\"width\", w)\r\n      .attr(\"height\", h)\r\n      ;\r\n\r\n      var linkLayer = svg.append(\"g\");    \r\n      var nodeLayer = svg.append(\"g\");   \r\n\r\n      \/\/\u30ce\u30fc\u30c9\u3001\u30ea\u30f3\u30af\u3001\u521d\u671f\u30c7\u30fc\u30bf    \r\n      var data = {\r\n        nodes:[\r\n          {id: 'A', x:500, y:500},\r\n          {id: 'B', x:0, y: 0},\r\n          {id: 'C', x:500, y:0},\r\n          {id: 'D', x:0, y:500},\r\n        ],\r\n        links:[\r\n          {id:\"AB\", source: \"A\", target: \"B\"},\r\n          {id:\"BC\",  source: \"B\", target: \"C\"},\r\n          {id:\"CD\", source: \"C\", target: \"D\"},\r\n          {id:\"DB\", source: \"D\", target: \"B\"},\r\n        ]\r\n      };\r\n\r\n      \/\/\u30d5\u30a9\u30fc\u30b9\u30b7\u30e5\u30df\u30ec\u30fc\u30bf\u30fc\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u7528\u610f\r\n      var simulation = d3.forceSimulation()\r\n      .force(\"link\", d3.forceLink().id(d =>  d.id).distance(() => 100).strength((d,i) => (i * 0.1) ))\r\n      .velocityDecay(0.9)\r\n      .force(\"collide\",d3.forceCollide(32))\r\n      .force('x', d3.forceX().strength(0.3).x(w\/2))\r\n      .force('y', d3.forceY().strength(0.3).y(h\/2))\r\n      .force('charge', d3.forceManyBody().strength((d,i) => -(i * 100)))    \r\n\r\n      \/\/\u30c9\u30e9\u30c3\u30b0\u6642\u306e\u51e6\u7406        \r\n      var drag = d3.drag()\r\n      .on(\"start\", dragstarted)\r\n      .on(\"drag\", dragged)\r\n      .on(\"end\", dragended)        \r\n\r\n      function dragstarted(d) {\r\n        if (!d3.event.active) simulation.alphaTarget(0.3).restart();\r\n        d.fx = d.x;\r\n        d.fy = d.y;\r\n      }\r\n      function dragged(d) {\r\n        d.fx = d3.event.x;\r\n        d.fy = d3.event.y;\r\n      }\r\n      function dragended(d) {\r\n        if (!d3.event.active) simulation.alphaTarget(0);\r\n        d.fx = null;\r\n        d.fy = null;\r\n      }     \r\n\r\n      \/\/svg\u30a8\u30ec\u30e1\u30f3\u30c8\u3092\u66f4\u65b0\u3059\u308b\r\n      function updateElement(){\r\n        simulation.nodes(data.nodes);\r\n        simulation.force(\"link\").links(data.links);\r\n\r\n\r\n        var link = linkLayer.selectAll(\".link\")\r\n        .data(data.links, d => d.id )\r\n        ;\r\n\r\n\r\n        link.enter().append(\"line\")\r\n          .attr(\"class\", \"link\")\r\n          .attr(\"stroke\", \"black\")\r\n        ;\r\n\r\n        link.exit().remove();\r\n\r\n\r\n        var node = nodeLayer.selectAll(\".node\")\r\n        .data(data.nodes, d=> d.id )\r\n        ;\r\n\r\n\r\n        var newNode = node.enter().append(\"g\")\r\n        .attr(\"class\", \"node\")\r\n        .call(drag)\r\n        ;\r\n\r\n        node.exit().remove();\r\n\r\n        newNode.append(\"image\")\r\n          .attr(\"xlink:href\", \"globe.png\")\r\n          .attr(\"x\", \"-16px\")\r\n          .attr(\"y\", \"-16px\")\r\n          .attr(\"width\", \"32px\")\r\n          .attr(\"height\", \"32px\")        \r\n\r\n        newNode.append(\"text\")\r\n          .attr(\"x\", \"1.5em\")\r\n          .attr(\"text-anchor\", \"middle\")\r\n          .attr(\"dominant-baseline\", \"middle\")\r\n          .text(d => d.id)\r\n        ;\r\n\r\n        simulation.alpha(1).restart();\r\n\r\n\r\n      }\r\n\r\n      \/\/\u30d5\u30a9\u30fc\u30b9\u30b7\u30e5\u30df\u30ec\u30fc\u30bf\u30fc\u306e\u8a08\u7b97\u7d50\u679c\u3092\u4f7f\u3063\u3066\u3001\u30ce\u30fc\u30c9\u3068\u30ea\u30f3\u30af\u306e\u4f4d\u7f6e\u3092\u66f4\u65b0\u3059\u308b\r\n      function ticked() {\r\n        svg.selectAll(\".link\")\r\n          .attr(\"x1\", d => d.source.x)\r\n          .attr(\"y1\", d => d.source.y)\r\n          .attr(\"x2\", d => d.target.x)\r\n          .attr(\"y2\", d => d.target.y)\r\n        ;\r\n\r\n        svg.selectAll(\".node\")\r\n          .attr(\"transform\", d => \"translate(\"+[d.x, d.y]+\")\")\r\n        ;\r\n\r\n      }\r\n\r\n      \/\/\u30dc\u30bf\u30f3\u306b\u30c7\u30fc\u30bf\u3092\u5909\u66f4\u3059\u308b\u51e6\u7406\u3092\u30bb\u30c3\u30c8\u3059\u308b\u3002\r\n      function setBtnEventListener() {\r\n        \/\/\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u6642\u306e\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\r\n        var btnEventHandler = {\r\n          addENode:function(){\r\n            data.nodes.push({id:'E'});\r\n            data.links.push({id:\"EA\", source: \"E\", target: \"C\"});\r\n            updateElement();\r\n          },\r\n          addACLink:function(){\r\n            data.links.push({id:\"AC\", source: \"A\", target: \"C\"});\r\n            updateElement();\r\n          },\r\n          deleteDLinkNode:function(){\r\n            data.nodes = data.nodes.filter(function(d){\r\n              return d.id != \"D\";\r\n            });\r\n            data.links = data.links.filter(function(d){\r\n              return d.source.id != \"D\" && d.target.id != \"D\";\r\n            });\r\n\r\n            updateElement();    \r\n          },\r\n          deleteBCLink:function(){\r\n            data.links = data.links.filter(function(d){\r\n              return !(d.source.id == \"B\" && d.target.id == \"C\");\r\n            });\r\n            updateElement();\r\n          }\r\n        };\r\n\r\n\r\n        d3.select(\"#btn\").selectAll(\"button\").on(\"click\", function(){\r\n          btnEventHandler[this.dataset.fn]();\r\n        });\r\n      }\r\n\r\n      function main() {\r\n        updateElement();\r\n        simulation.on(\"tick\", ticked);    \r\n        setBtnEventListener();\r\n      }\r\n\r\n\r\n      main();\r\n\r\n    <\/script>    \r\n  <\/body>\r\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u3088\u304f\u898b\u304b\u3051\u308b\u308f\u308a\u306b\u3001\u6b63\u5f0f\u306a\u540d\u79f0\u3092\u77e5\u3089\u306a\u304b\u3063\u305f\u306e\u3067\u3059…<\/p>\n","protected":false},"author":1,"featured_media":949,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[69],"tags":[],"class_list":["post-948","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3v4","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/948","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=948"}],"version-history":[{"count":28,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/948\/revisions"}],"predecessor-version":[{"id":955,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/948\/revisions\/955"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/949"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}