{"id":3841,"date":"2014-11-14T15:14:13","date_gmt":"2014-11-14T06:14:13","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=3841"},"modified":"2017-02-03T01:19:54","modified_gmt":"2017-02-02T16:19:54","slug":"post-3841","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/3841","title":{"rendered":"\u70b9\u96c6\u5408\u3092\u5305\u3080\u30d1\u30b9\u3092\u63cf\u753b\u3059\u308b\uff08hull.js + D3.js\uff09"},"content":{"rendered":"<p>\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u70b9\u306e\u96c6\u5408\u3092\u5305\u3080\u30d1\u30b9\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<br \/>\nD3\u3067\u306f\u3001\u300c<a href=\"https:\/\/github.com\/mbostock\/d3\/wiki\/Hull-Geom\">d3.geom.hull<\/a>\u300d\u3068\u3044\u3046\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u30b7\u30f3\u30d7\u30eb\u306a<a href=\"http:\/\/bl.ocks.org\/mbostock\/4341699\">\u51f8\u5305<\/a>\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u304c\u3001\u4eca\u56de\u306f\u51f9\u9762\u3092\u542b\u3080\u30d1\u30b9\u3092\u4f5c\u6210\u3057\u305f\u3044\u306e\u3067hull.js\u3092\u7d44\u307f\u5408\u308f\u305b\u3066\u4f7f\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<p><span class=\"removed_link\" title=\"http:\/\/andreygeonya.github.io\/hull\/\">Hull.js<\/span><\/p>\n<h2>\u30b5\u30f3\u30d7\u30eb<\/h2>\n<p>\u3068\u308a\u3042\u3048\u305ahull.js\u306b\u3042\u3063\u305f\u99ac\u306e\u30b5\u30f3\u30d7\u30eb\u3092D3.js\u3092\u4f7f\u3063\u3066svg\u3067\u63cf\u753b\u3057\u3066\u307f\u307e\u3057\u305f\u3002\uff08\u5143\u306fcanvas\u4e0a\u306b\u63cf\u753b)<br \/>\n\u9752\u8272\u306e\u30d1\u30b9\u304chull.js\u3067\u7b97\u51fa\u3057\u305f\u3082\u306e\u3067\u3059\u3002<\/p>\n<p><a href=\"http:\/\/shimz.me\/example\/hulljs\/01\/index.html\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/11\/d3andhulljs141114.jpg\" alt=\"D3.js + hull.js\" width=\"590\" height=\"402\" class=\"aligncenter size-full wp-image-3842\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/11\/d3andhulljs141114.jpg 590w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/11\/d3andhulljs141114-220x150.jpg 220w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/shimz.me\/example\/hulljs\/01\/index.html\">example<\/a><\/p>\n<pre class=\"lang:js decode:true \" >\r\n\/\/\u99ac\u30dd\u30a4\u30f3\u30c8\u30c7\u30fc\u30bf\r\nvar horse13k = [[135,141],\r\n[132,142],\r\n[134,143],\r\n[141,144],\r\n\/* \u7701\u7565 *\/\r\n[958,272],\r\n[959,277]];\r\n\r\nvar svg = d3.select(\"svg\");\r\n\r\n \/\/\u30dd\u30a4\u30f3\u30c8\u3092\u8868\u793a\r\nvar point = svg.selectAll(\".point\")\r\n\t.data(horse13k)\r\n\t.enter()\r\n\t.append(\"circle\")\r\n\t.attr({\r\n\t\t\"class\": \"point\",\r\n\t\t\"cx\":function(d){ return d[0] },\r\n\t\t\"cy\":function(d){ return d[1] },\r\n\t\t\"r\":2,\r\n\t\t\"fill\":\"gray\"\r\n\t});\r\n\r\n\/\/\u30d1\u30b9\u3092\u7528\u610f\r\nvar hullpath = svg.append(\"path\")\r\n\t.attr({\r\n\t\t\"class\":\"hull\",\r\n\t\t\"stroke\": \"blue\",\r\n\t\t\"stroke-width\": 2,\r\n\t\t\"fill\": \"none\"\r\n\t});\r\n\r\n\t\/\/hull.js\u3092\u4f7f\u3063\u3066\u70b9\u96c6\u5408\u3092\u5305\u3080\u5ea7\u6a19\u3092\u7b97\u51fa\r\n\tvar distPointset = hull(horse13k , 20);\r\n\t\/\/\u53d6\u5f97\u3057\u305f\u5ea7\u6a19\u3092svg path\u306e\u30d1\u30b9\u30c7\u30fc\u30bf\u306b\u5909\u63db\u3057\u3066d\u5c5e\u6027\u306b\u6e21\u3059\r\n\thullpath.datum(distPointset).attr(\"d\", function(d) { return \"M\" + d.join(\"L\") + \"Z\"; });\r\n\r\n<\/pre>\n<p>Google Maps\u4e0a\u306e\u30dd\u30a4\u30f3\u30c8\u3092\u56f2\u3080\u30d1\u30b9\u3092\u63cf\u753b\u3059\u308b\u306e\u306b\u4f7f\u3048\u305d\u3046\u306a\u306e\u3067\u3059\u304c\u3001\u4eca\u306e\u3068\u3053\u308d\u4e0a\u624b\u304f\u3044\u3063\u3066\u307e\u305b\u3093\u3002<br \/>\n\u5730\u56f3\u4e0a\u3067\u3046\u307e\u304f\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u3089\u3001\u307e\u305f\u8a18\u4e8b\u306b\u3057\u3088\u3046\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u70b9\u306e\u96c6\u5408\u3092\u5305\u3080\u30d1\u30b9\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002 D&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3842,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-3841","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\/3841","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=3841"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3841\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/3842"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=3841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=3841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=3841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}