datavjs/example/force/force.html
2012-10-12 11:15:57 +08:00

67 lines
2.4 KiB
HTML

<!DOCTYPE html>
<!-- saved from url=(0043)http://mbostock.github.com/d3/ex/force.html
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Force-Directed Graph</title>
<script src="../../deps/compatible.js"></script>
<script type="text/javascript" src="../../deps/d3.min.js"></script>
<script type="text/javascript" src="../../deps/d3.layout.min.js"></script>
<script type="text/javascript" src="../../deps/d3.geom.min.js"></script>
<script type="text/javascript" src="../../deps/d3.csv.js"></script>
<script type="text/javascript" src="../../deps/jquery-1.7.1.min.js"></script>
<script src="../../deps/raphael.min.js"></script>
<!-- force -->
<script type="text/javascript" src="../../deps/seajs/sea.js"></script>
<script type="text/javascript">
var dir = window.location.href.replace(/\\/g,'/').replace(/\/[^\/]*$/, '');
seajs.config({
alias: {
'DataV': dir + '/../../datav.js',
'Force': dir + '/../../libs/force.js'
}
});
</script>
<STYLE type="text/css">
#chart {
border-top: 1px dashed #F00;
border-bottom: 1px dashed #F00;
padding-left: 20px;
}
.textArea {
border: 2px solid black;
color: black;
font-family: monospace;
height: 3in;
overflow: auto;
padding: 0.5em;
width: 750px;
}
</STYLE>
</head>
<body>
<div class="body">
<h1 id="forcedirected_graph">Force-Directed Graph</h1>
<div class="gallery" id="chart"></div>
</div>
<script type="text/javascript">
seajs.use(["Force", "DataV"], function (Force, DataV) {
// DataV.changeTheme("datav");
var net = new Force("chart", {
width: 800,
height: 600,
tag: true
});
DataV.csv("DataExample.csv", function (source) {
net.setSource(source);
net.render();
});
});
</script>
</body>
</html>