Skip to content

Instantly share code, notes, and snippets.

@yuta-01

yuta-01/d3.js

Last active January 19, 2016 18:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yuta-01/98d86494feba01d90e12 to your computer and use it in GitHub Desktop.
Save yuta-01/98d86494feba01d90e12 to your computer and use it in GitHub Desktop.
Download ZIP
force(ベンゼンヘキサクロリド)
Raw
d3.js
var list = {
nodes : [
{ name : "C" },
{ name : "C" },
{ name : "C" },
{ name : "C" },
{ name : "C" },
{ name : "C" },
{ name : "Cl" },
{ name : "Cl" },
{ name : "Cl" },
{ name : "Cl" },
{ name : "Cl" },
{ name : "Cl" },
{ name : "H" },
{ name : "H" },
{ name : "H" },
{ name : "H" },
{ name : "H" },
{ name : "H" }
],
links : [
{ source : 0, target : 1, point : 5 },
{ source : 1, target : 2, point : 5 },
{ source : 2, target : 3, point : 5 },
{ source : 3, target : 4, point : 5 },
{ source : 4, target : 5, point : 5 },
{ source : 5, target : 0, point : 5 },
{ source : 0, target : 12, point : 5 },
{ source : 1, target : 13, point : 5 },
{ source : 2, target : 14, point : 5 },
{ source : 3, target : 15, point : 5 },
{ source : 4, target : 16, point : 5 },
{ source : 5, target : 17, point : 5 },
{ source : 0, target : 6, point : 5 },
{ source : 1, target : 7, point : 5 },
{ source : 2, target : 8, point : 5 },
{ source : 3, target : 9, point : 5 },
{ source : 4, target : 10, point : 5 },
{ source : 5, target : 11, point : 5 }
]
};
var svgWidth = 980;
var svgHeight = 480;
var svg = d3.select("#myGraph").append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
// Force Layoutを設定
var force = d3.layout.force()
.nodes(list.nodes)
.links(list.links)
.size([svgWidth, svgHeight])
.linkDistance(80)//リンクの距離
.friction(0.9)//摩擦力
.charge(-500)//反発力-引力
.gravity(0.05)//重力
.start();
var link = svg.selectAll("line")
.data(list.links)
.enter()
.append("line")
.style("stroke", "#ddd")
.style("stroke-width", function(d){ return d.point; });
var node = svg.selectAll("circle")
.data(list.nodes)
.enter()
.append("circle")
.attr("r", 30)
.attr("fill","#fff")
.style("stroke-width","2px")
.style("stroke", "#fff")
.call(force.drag);
var label = svg.selectAll('text')
.data(list.nodes)
.enter()
.append('text')
.attr("text-anchor", "middle")
.attr("fill", "#333")
.attr("dy", ".35em")
.style({"font-size":20})
.text(function(d) { return d.name;});
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
label.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>force</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="myGraph"></div>
<script src="d3.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment