{"id":2325,"date":"2015-09-11T11:45:20","date_gmt":"2015-09-11T02:45:20","guid":{"rendered":"http:\/\/www.whoocus.com\/blog\/?p=2325"},"modified":"2015-09-12T19:14:16","modified_gmt":"2015-09-12T10:14:16","slug":"d3%e3%81%a7%e3%83%9e%e3%83%83%e3%83%97%e6%8f%8f%e7%94%bb%e3%81%ae%e8%a6%9a%e3%81%88%e6%9b%b8%e3%81%8d","status":"publish","type":"post","link":"https:\/\/www.blowfish.co.jp\/?p=2325","title":{"rendered":"D3\u3067\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u56f3\u3084\u30de\u30c3\u30d7\u63cf\u753b\u306e\u899a\u3048\u66f8\u304d"},"content":{"rendered":"

\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u56f3\u63cf\u753b<\/strong><\/p>\n

[html]
\n<html>
\n<head>
\n<title>\u53d6\u5f15\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u56f3<\/title>
\n<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/3.5.6\/d3.min.js" charset="utf-8"><\/script>
\n<style>
\n svg{width: 640px; height: 640px; border: 1px solid black; background-color: #fff;}
\n .forceLine{stroke:blue; stroke-width:2;}
\n<\/style><\/p>\n

<\/head>
\n<body>
\n <h2>\u53d6\u5f15\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u56f3<\/h2>
\n <svg id="myNetwork"><\/svg>
\n <script src="js\/network.js"><\/script>
\n<\/body>
\n<\/html>
\n[\/html]<\/p>\n

[javascript]
\nvar dataSet = {nodes : [{name : "Apple"}, {name : "Orange"}, {name : "Banana"}, {name : "Melon"},],
\n links : [{ source : 0, target : 1}, {source : 1, target : 0}, {source : 2, target : 0},{source : 3, target : 0}]
\n }<\/p>\n

var force = d3.layout.force()
\n .nodes(dataSet.nodes)
\n .links(dataSet.links)
\n .size([320, 320])
\n .linkDistance(100)
\n .linkStrength(5)
\n .gravity(0.0001)
\n .start()<\/p>\n

var link = d3.select("#myNetwork")
\n .selectAll("line")
\n .data(dataSet.links)
\n .enter()
\n .append("line")
\n .attr("class", "forceLine" )<\/p>\n

var node = d3.select("#myNetwork")
\n .selectAll("circle")
\n .data(dataSet.nodes)
\n .enter()
\n .append("circle")
\n .attr("r", 10 )
\n .call(force.drag)<\/p>\n

force.on("tick", function(){
\n link
\n .attr("x1", function(d) { return d.source.x;})
\n .attr("y1", function(d) { return d.source.y;})
\n .attr("x2", function(d) { return d.target.x;})
\n .attr("y2", function(d) { return d.target.y;})
\n node
\n .attr("cx", function(d) { return d.x;})
\n .attr("cy", function(d) { return d.y;})
\n})
\n[\/javascript]<\/p>\n

\u5730\u56f3\u63cf\u753b<\/strong>
\n[html]
\n<html>
\n<head>
\n<title>\u7fa4\u99ac\u770c<\/title>
\n<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/3.5.6\/d3.min.js" charset="utf-8"><\/script>
\n<script src="http:\/\/d3js.org\/d3.geo.projection.v0.min.js" charset="utf-8"><\/script>
\n<style>
\n svg{width: 640px; height: 640px; border: 1px solid black; background-color: #fff;}
\n<\/style>
\n<\/head>
\n<body>
\n <h2>\u7fa4\u99ac\u770c<\/h2>
\n <svg id="myMap"><\/svg>
\n <script src="js\/map.js"><\/script>
\n<\/body>
\n<\/html>
\n[\/html]<\/p>\n

[javascript]
\nvar svgWidth = 640;
\nvar svgHeight = 640;
\nvar path = d3.geo.path()
\n .projection(d3.geo.mercator()
\n .center([138.700, 36.5000])
\n .scale(24000)
\n .translate([200,300])
\n )
\n d3.json("js\/Gumma.json",
\n function(error, pref) {
\n d3.select("#myMap")
\n .selectAll("path")
\n .data(pref.features)
\n .enter()
\n .append("path")
\n .attr("d", path)
\n .style("fill", "#cceeee")
\n })
\n[\/javascript]<\/p>\n","protected":false},"excerpt":{"rendered":"

\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u56f3\u63cf\u753b [html] <html> <head> <title>\u53d6\u5f15\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u56f3<\/title> <script src="https:\/\/c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"saved_in_kubio":false,"footnotes":""},"categories":[10,4],"tags":[],"class_list":["post-2325","post","type-post","status-publish","format-standard","hentry","category-javascript","category-tech"],"_links":{"self":[{"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=\/wp\/v2\/posts\/2325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2325"}],"version-history":[{"count":5,"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=\/wp\/v2\/posts\/2325\/revisions"}],"predecessor-version":[{"id":2331,"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=\/wp\/v2\/posts\/2325\/revisions\/2331"}],"wp:attachment":[{"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}