Bring force examples up-to-date
This commit is contained in:
Kristofer Monisit
Родитель
9a3cd7e3cf
Коммит
5e0be47781
|
|
@ -18,20 +18,20 @@ line {
|
|||
<body>
|
||||
<script type="text/javascript">
|
||||
|
||||
var w = 960,
|
||||
h = 500,
|
||||
r = 6,
|
||||
var width = 960,
|
||||
height = 500,
|
||||
radius = 6,
|
||||
fill = d3.scale.category20();
|
||||
|
||||
var force = d3.layout.force()
|
||||
.gravity(.01)
|
||||
.charge(-120)
|
||||
.linkDistance(30)
|
||||
.size([w, h]);
|
||||
.size([width, height]);
|
||||
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
d3.json("miserables.json", function(json) {
|
||||
var link = svg.selectAll("line")
|
||||
|
|
@ -41,7 +41,7 @@ d3.json("miserables.json", function(json) {
|
|||
var node = svg.selectAll("circle")
|
||||
.data(json.nodes)
|
||||
.enter().append("circle")
|
||||
.attr("r", r - .75)
|
||||
.attr("r", radius - .75)
|
||||
.style("fill", function(d) { return fill(d.group); })
|
||||
.style("stroke", function(d) { return d3.rgb(fill(d.group)).darker(); })
|
||||
.call(force.drag);
|
||||
|
|
@ -53,8 +53,8 @@ d3.json("miserables.json", function(json) {
|
|||
.start();
|
||||
|
||||
function tick() {
|
||||
node.attr("cx", function(d) { return d.x = Math.max(r, Math.min(w - r, d.x)); })
|
||||
.attr("cy", function(d) { return d.y = Math.max(r, Math.min(h - r, d.y)); });
|
||||
node.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
|
||||
.attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });
|
||||
|
||||
link.attr("x1", function(d) { return d.source.x; })
|
||||
.attr("y1", function(d) { return d.source.y; })
|
||||
|
|
|
|||
|
|
@ -28,14 +28,18 @@ line.link {
|
|||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
var w = 960, // svg width
|
||||
h = 600, // svg height
|
||||
var width = 960, // svg width
|
||||
height = 600, // svg height
|
||||
dr = 4, // default point radius
|
||||
off = 15, // cluster hull offset
|
||||
expand = {}, // expanded clusters
|
||||
data, net, force, hullg, hull, linkg, link, nodeg, node,
|
||||
curve = d3.svg.line().interpolate("cardinal-closed").tension(.85),
|
||||
fill = d3.scale.category20();
|
||||
data, net, force, hullg, hull, linkg, link, nodeg, node;
|
||||
|
||||
var curve = d3.svg.line()
|
||||
.interpolate("cardinal-closed")
|
||||
.tension(.85);
|
||||
|
||||
var fill = d3.scale.category20();
|
||||
|
||||
function noop() { return false; }
|
||||
|
||||
|
|
@ -126,14 +130,14 @@ function network(data, prev, index, expand) {
|
|||
}
|
||||
|
||||
function convexHulls(nodes, index, offset) {
|
||||
var h = {};
|
||||
var hulls = {};
|
||||
|
||||
// create point sets
|
||||
for (var k=0; k<nodes.length; ++k) {
|
||||
var n = nodes[k];
|
||||
if (n.size) continue;
|
||||
var i = index(n),
|
||||
l = h[i] || (h[i] = []);
|
||||
l = hulls[i] || (hulls[i] = []);
|
||||
l.push([n.x-offset, n.y-offset]);
|
||||
l.push([n.x-offset, n.y+offset]);
|
||||
l.push([n.x+offset, n.y-offset]);
|
||||
|
|
@ -142,8 +146,8 @@ function convexHulls(nodes, index, offset) {
|
|||
|
||||
// create convex hulls
|
||||
var hulls = [];
|
||||
for (i in h) {
|
||||
hulls.push({group: i, path: d3.geom.hull(h[i])});
|
||||
for (i in hulls) {
|
||||
hulls.push({group: i, path: d3.geom.hull(hulls[i])});
|
||||
}
|
||||
|
||||
return hulls;
|
||||
|
|
@ -158,8 +162,8 @@ function drawCluster(d) {
|
|||
var body = d3.select("body");
|
||||
|
||||
var vis = body.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
d3.json("miserables.json", function(json) {
|
||||
data = json;
|
||||
|
|
@ -189,7 +193,7 @@ function init() {
|
|||
force = d3.layout.force()
|
||||
.nodes(net.nodes)
|
||||
.links(net.links)
|
||||
.size([w, h])
|
||||
.size([width, height])
|
||||
.linkDistance(50)
|
||||
.start();
|
||||
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@ line.link {
|
|||
<div id="chart"></div>
|
||||
<script type="text/javascript">
|
||||
|
||||
var w = 960,
|
||||
h = 500,
|
||||
var width = 960,
|
||||
height = 500,
|
||||
node,
|
||||
link,
|
||||
root;
|
||||
|
|
@ -34,17 +34,17 @@ var force = d3.layout.force()
|
|||
.on("tick", tick)
|
||||
.charge(function(d) { return d._children ? -d.size / 100 : -30; })
|
||||
.linkDistance(function(d) { return d.target._children ? 80 : 30; })
|
||||
.size([w, h]);
|
||||
.size([width, height]);
|
||||
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
d3.json("../data/flare.json", function(json) {
|
||||
root = json;
|
||||
root.fixed = true;
|
||||
root.x = w / 2;
|
||||
root.y = h / 2;
|
||||
root.x = width / 2;
|
||||
root.y = height / 2;
|
||||
update();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -29,25 +29,25 @@ rect {
|
|||
<div id="chart"></div>
|
||||
<script type="text/javascript">
|
||||
|
||||
var w = 960,
|
||||
h = 500,
|
||||
var width = 960,
|
||||
height = 500,
|
||||
fill = d3.scale.category20(),
|
||||
nodes = [],
|
||||
links = [];
|
||||
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
vis.append("rect")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
var force = d3.layout.force()
|
||||
.distance(30)
|
||||
.nodes(nodes)
|
||||
.links(links)
|
||||
.size([w, h]);
|
||||
.size([width, height]);
|
||||
|
||||
var cursor = vis.append("circle")
|
||||
.attr("r", 30)
|
||||
|
|
|
|||
|
|
@ -29,19 +29,19 @@ div.link {
|
|||
<body>
|
||||
<script type="text/javascript">
|
||||
|
||||
var w = 960,
|
||||
h = 500,
|
||||
r = 6,
|
||||
var width = 960,
|
||||
height = 500,
|
||||
radius = 6,
|
||||
fill = d3.scale.category20();
|
||||
|
||||
var force = d3.layout.force()
|
||||
.charge(-120)
|
||||
.linkDistance(30)
|
||||
.size([w, h]);
|
||||
.size([width, height]);
|
||||
|
||||
var vis = d3.select("body").append("div")
|
||||
.style("width", w + "px")
|
||||
.style("height", h + "px");
|
||||
.style("width", width + "px")
|
||||
.style("height", height + "px");
|
||||
|
||||
d3.json("miserables.json", function(json) {
|
||||
var link = vis.selectAll("div.link")
|
||||
|
|
@ -64,8 +64,8 @@ d3.json("miserables.json", function(json) {
|
|||
.start();
|
||||
|
||||
function tick() {
|
||||
node.style("left", function(d) { return (d.x = Math.max(r, Math.min(w - r, d.x))) + "px"; })
|
||||
.style("top", function(d) { return (d.y = Math.max(r, Math.min(h - r, d.y))) + "px"; });
|
||||
node.style("left", function(d) { return (d.x = Math.max(radius, Math.min(width - radius, d.x))) + "px"; })
|
||||
.style("top", function(d) { return (d.y = Math.max(radius, Math.min(height - radius, d.y))) + "px"; });
|
||||
|
||||
link.style("left", function(d) { return d.source.x + "px"; })
|
||||
.style("top", function(d) { return d.source.y + "px"; })
|
||||
|
|
|
|||
|
|
@ -21,15 +21,15 @@ line {
|
|||
<body>
|
||||
<script type="text/javascript">
|
||||
|
||||
var w = 960,
|
||||
h = 500;
|
||||
var width = 960,
|
||||
height = 500;
|
||||
|
||||
var path = d3.geo.path(),
|
||||
force = d3.layout.force().size([w, h]);
|
||||
force = d3.layout.force().size([width, height]);
|
||||
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
d3.json("../data/us-states.json", function(states) {
|
||||
var nodes = [],
|
||||
|
|
|
|||
|
|
@ -8,19 +8,19 @@
|
|||
<div id="chart"></div>
|
||||
<script type="text/javascript">
|
||||
|
||||
var w = 960,
|
||||
h = 500,
|
||||
var width = 960,
|
||||
height = 500,
|
||||
fill = d3.scale.category10(),
|
||||
nodes = d3.range(100).map(Object);
|
||||
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
var force = d3.layout.force()
|
||||
.nodes(nodes)
|
||||
.links([])
|
||||
.size([w, h])
|
||||
.size([width, height])
|
||||
.start();
|
||||
|
||||
var node = vis.selectAll("circle.node")
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче