I'm trying to implement the following script in v4:
This script is written in v3 and is not valid in v4.
(I'm also new to d3 and started to learn v4)
var width = 400,
height = 400;
var nodes = d3.range(200).map(function() { return {radius: Math.random() * 12 + 4}; }),
root = nodes[0],
color = d3.scale.category10();
root.radius = 0;
root.fixed = true;
var force = d3.layout.force()
.gravity(0.05)
.charge(function(d, i) { return i ? 0 : -2000; })
.nodes(nodes)
.size([width, height]);
force.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll("circle")
.data(nodes.slice(1))
.enter().append("circle")
.attr("r", function(d) { return d.radius; })
.style("fill", function(d, i) { return color(i % 3); });
force.on("tick", function(e) {
var q = d3.geom.quadtree(nodes),
i = 0,
n = nodes.length;
while (++i < n) q.visit(collide(nodes[i]));
svg.selectAll("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
svg.on("mousemove", function() {
var p1 = d3.mouse(this);
root.px = p1[0];
root.py = p1[1];
force.resume();
});
function collide(node) {
var r = node.radius + 16,
nx1 = node.x - r,
nx2 = node.x + r,
ny1 = node.y - r,
ny2 = node.y + r;
return function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== node)) {
var x = node.x - quad.point.x,
y = node.y - quad.point.y,
l = Math.sqrt(x * x + y * y),
r = node.radius + quad.point.radius;
if (l < r) {
l = (l - r) / l * .5;
node.x -= x *= l;
node.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
};
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
The best solution I could think of is to move around a big special circle and use collision to avoid the rest of the circles touch my big circle.
But my big circle is freezing.
In addition, think my overall solution is not so good:
What am I doing wrong?
var width = 1000,
height = 600;
d3.select("body")
.append("svg")
.attr("width", 1000)
.attr("height", 600);
const collideCircle = {
radius: 30,
fill: 'black',
center: {
x: 200,
y: 200
}
};
const radius = 10;
const moreCircles = [...Array(40).keys()].map(i => ({
radius,
fill: 'pink',
center: {
x: 200,
y: 200
}
}));
const simulation = d3.forceSimulation([collideCircle, ...moreCircles])
.force('x', d3.forceX().x(d => d.center.x))
.force('y', d3.forceY().y(d => d.center.y))
.force('collision', d3.forceCollide().radius(d => d.radius))
.on('tick', ticked);
const collideCircles = d3.select('svg')
.append('g')
.selectAll('circle')
.data([collideCircle])
.enter().append('circle')
.attr('fill', d => d.fill)
.attr('r', d => d.radius)
.attr('cx', d => d.x)
.attr('cy', d => d.y);
const moreCirclesGeom = d3.select('svg')
.append('g')
.selectAll('circle')
.data(moreCircles)
.enter().append('circle')
.attr('fill', d => d.fill)
.attr('r', d => d.radius)
.attr('cx', d => d.x)
.attr('cy', d => d.y);
function ticked() {
// stay in the SVG (box) only:
moreCirclesGeom
.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));
});
collideCircles
.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));
});
}
d3.select('svg').on("mouseover", handleMouseOver);
function handleMouseOver() {
collideCircle.fx = d3.event.x;
collideCircle.fy = d3.event.y;
simulation.alphaTarget(0.1).restart();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>
Related
I'm working with d3, but can't seem to add an image to my SVG circle? I've tried different ways but won't give the output I want. Can someone help me?
The image loaded correctly so that shouldn't be the problem. I also tried the fill attribute but it didn't work.
import React, { Component } from "react";
import "../styles/style.css";
import $ from "jquery";
import * as d3 from "d3";
import btcImage from "../images/btc.png";
const crypto = require("../data/cryptoData.json");
const coins = [];
for (let i = 0; i < crypto.data.length; i++) {
var coin = crypto.data[i];
coins.push(coin);
}
var data = [];
coins.forEach((coin) => {
var text = coin.symbol;
var r = coin.quote.USD.market_cap / 4000000000;
data.push({
text: text,
category: coin.quote.USD.percent_change_24h,
image: btcImage,
r: r,
r_change_1: coin.quote.USD.market_cap / 4000000000,
r_change_2: coin.quote.USD.market_cap / 4000000000,
});
});
function collide(alpha) {
var quadtree = d3.geom.quadtree(data);
return function (d) {
var r = d.r + 10,
nx1 = d.x - r,
nx2 = d.x + r,
ny1 = d.y - r,
ny2 = d.y + r;
quadtree.visit(function (quad, x1, y1, x2, y2) {
if (quad.point && quad.point !== d) {
var x = d.x - quad.point.x,
y = d.y - quad.point.y,
l = Math.sqrt(x * x + y * y),
r = d.r + quad.point.r;
if (l < r) {
l = ((l - r) / l) * (1 + alpha);
d.x -= x *= l;
d.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
});
};
}
const bubbleCloud = (element) => {
var container = d3.select(".bubble-cloud");
var $container = $(".bubble-cloud");
var containerWidth = $container.width();
var containerHeight = $container.height();
var svgContainer = container
.append("svg")
.attr("width", containerWidth)
.attr("height", containerHeight);
// prepare layout
var force = d3.layout
.force()
.size([containerWidth, containerHeight])
.gravity(0)
.charge(0)
.friction(1);
// load data
force.nodes(data).start();
// create item groups
var node = svgContainer
.selectAll(".node")
.data(data)
.enter()
.append("g")
.attr("class", "node")
.call(force.drag);
// create circles
node
.append("defs")
.append("pattern")
.attr("height", 60)
.attr("width", 60)
.attr("x", 0)
.attr("y", 0)
.append("image")
.attr("xlink:href", function (d) {
return d.image;
})
.attr("height", 60)
.attr("width", 60)
.attr("x", 0)
.attr("y", 0);
node
.append("circle")
.attr("r", 1e-6)
.style("fill", function (d) {
return d.image;
});
// create labels
node
.append("text")
.text(function (d) {
return d.text;
})
.classed("text", true)
.style({
fill: "#ffffff",
"text-anchor": "middle",
"font-size": "12px",
"font-weight": "bold",
"text-transform": "uppercase",
"font-family": "Tahoma, Arial, sans-serif",
});
node
.append("text")
.text(function (d) {
return d.category;
})
.classed("category", true)
.style({
color: "white",
"font-family": "Tahoma, Arial, sans-serif",
"text-anchor": "middle",
"font-size": "9px",
});
node
//.append("line")
//.classed("line", true)
//.attr({
// x1: 0,
// y1: 0,
// x2: 0,
// y2: 0,
//})
.attr("stroke-width", 1)
.attr("stroke", function (d) {
return d.stroke;
});
// put circle into movement
force.on("tick", function (e) {
d3.selectAll("circle")
.each(collide(0.1))
.attr("r", function (d) {
return d.r;
})
.attr("cx", function (d) {
// boundaries
if (d.x <= d.r) {
d.x = d.r + 1;
}
if (d.x >= containerWidth - d.r) {
d.x = containerWidth - d.r - 1;
}
return d.x;
})
.attr("cy", function (d) {
// boundaries
if (d.y <= d.r) {
d.y = d.r + 1;
}
if (d.y >= containerHeight - d.r) {
d.y = containerHeight - d.r - 1;
}
return d.y;
});
d3.selectAll("line").attr({
x1: function (d) {
return d.x - d.r + 10;
},
y1: function (d) {
return d.y;
},
x2: function (d) {
return d.x + d.r - 10;
},
y2: function (d) {
return d.y;
},
});
d3.selectAll(".text")
.attr("x", function (d) {
return d.x;
})
.attr("y", function (d) {
return d.y - 10;
});
d3.selectAll(".category")
.attr("x", function (d) {
return d.x;
})
.attr("y", function (d) {
return d.y + 20;
});
force.alpha(0.1);
});
};
class Bubbles extends Component {
render() {
return <div className="bubble-cloud" ref={bubbleCloud}></div>;
}
}
export default Bubbles;
I think I'm overlooking something
Output:
From two days I am trying to add new nodes to existing clustered force layout. I am able to add nodes to existing force and pack layout but gravity and charge force is not applying on newly added nodes and I think 'tick' event call back is also not occurring for newly added nodes. I have attached my code below.
var width = 960,
height = 500,
padding = 1.5, // separation between same-color nodes
clusterPadding = 20, // separation between different-color nodes
maxRadius = 12;
var n = 200, // total number of nodes
m = 10; // number of distinct clusters
var color = d3.scale.category10()
.domain(d3.range(m));
// The largest node for each cluster.
var clusters = new Array(m);
var nodes = d3.range(n).map(function() {
var i = Math.floor(Math.random() * m),
r = Math.sqrt((i + 1) / m * -Math.log(Math.random())) * maxRadius,
d = {cluster: i, radius: r};
if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d;
return d;
});
Use the pack layout to initialize node positions.
var pack = d3.layout.pack()
.sort(null)
.size([width, height])
.children(function(d) { return d.values; })
.value(function(d) { return d.radius * d.radius; })
.nodes({values: d3.nest()
.key(function(d) { return d.cluster; })
.entries(nodes)});
var force = d3.layout.force()
.nodes(nodes)
.size([width, height])
.gravity(0.01)
.charge(function(d) {
if(d.radius == clusters[d.cluster].radius) {
return(-10 * d.radius);
}
else {
return(0);
}
})
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var node = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.style("fill", function(d) { return color(d.cluster); })
.call(force.drag);
node.transition()
.duration(750)
.delay(function(d, i) { return i * 5; })
.attrTween("r", function(d) {
var i = d3.interpolate(0, d.radius);
return function(t) { return d.radius = i(t); };
});
//This setInterval function is for adding new node to existing
//force and pack layout for every one second
setInterval(function() {
var i = Math.floor(Math.random() * m),
r = Math.sqrt((i + 1) / m * -Math.log(Math.random())) * maxRadius,
d = {cluster: i, radius: r, depth: 2};
if(d.radius < clusters[d.cluster].radius ) {
nodes.push(d);
}
force.nodes(nodes).start();
var node = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.style("fill", function(d) { return color(d.cluster); })
.attr({r: function(d) { return(d.radius); },
cx: function(d) { return(d.x); },
cy: function(d) { return(d.y); },
})
.call(force.drag);
}, 1000);
function tick(e) {
node
.each(cluster(e.alpha * 0.1))
.each(collide(e.alpha * 0.3))
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
// Move d to be adjacent to the cluster node.
function cluster(alpha) {
return function(d) {
var cluster = clusters[d.cluster];
if (cluster === d) return;
var x = d.x - cluster.x,
y = d.y - cluster.y,
l = Math.sqrt(x * x + y * y),
r = d.radius + cluster.radius + 10;
if (l != r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
cluster.x += x;
cluster.y += y;
}
};
}
// Resolves collisions between d and all other circles.
function collide(alpha) {
var quadtree = d3.geom.quadtree(nodes);
return function(d) {
var r = d.radius + maxRadius + Math.max(padding, clusterPadding),
nx1 = d.x - r,
nx2 = d.x + r,
ny1 = d.y - r,
ny2 = d.y + r;
quadtree.visit(function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== d)) {
var x = d.x - quad.point.x,
y = d.y - quad.point.y,
l = Math.sqrt(x * x + y * y),
r = d.radius + quad.point.radius + (d.cluster === quad.point.cluster ? padding : clusterPadding);
if (l < r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
});
};
}
I have gone through various documentation from two days and tried everything and I could not able to understand what is going on inside my JavaScript code. Finally I end up here. Please some one help me out.
You were not managing the general update pattern properly.
Here is the correct way to do it..
setInterval(function() {
var i = Math.floor(Math.random() * m),
r = Math.sqrt((i + 1) / m * -Math.log(Math.random())) * maxRadius,
d = {cluster: i, radius: r, depth: 2};
if(d.radius < clusters[d.cluster].radius ) {
nodes.push(d);
}
node = node.data(nodes);
node.enter().append("circle")
.style("fill", function(d) { return color(d.cluster); })
.attr({r: function(d) { return(d.radius); },
cx: function(d) { return(d.x); },
cy: function(d) { return(d.y); },
})
.call(force.drag);
force.start();
}, 1000);
And here is a working version...
function drawAnimation() {
var width = 960,
height = 500,
padding = 1.5, // separation between same-color nodes
clusterPadding = 20, // separation between different-color nodes
maxRadius = 12;
var n = 200, // total number of nodes
m = 10; // number of distinct clusters
var color = d3.scale.category10()
.domain(d3.range(m));
// The largest node for each cluster.
var clusters = new Array(m);
var nodes = d3.range(n).map(function() {
var i = Math.floor(Math.random() * m),
r = Math.sqrt((i + 1) / m * -Math.log(Math.random())) * maxRadius,
d = {cluster: i, radius: r};
if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d;
return d;
});
// Use the pack layout to initialize node positions.
var pack = d3.layout.pack()
.sort(null)
.size([width, height])
.children(function(d) { return d.values; })
.value(function(d) { return d.radius * d.radius; })
.nodes({values: d3.nest()
.key(function(d) { return d.cluster; })
.entries(nodes)});
var force = d3.layout.force()
.nodes(nodes)
.size([width, height])
.gravity(0.01)
.charge(function(d) {
if(d.radius == clusters[d.cluster].radius) {
return(-10 * d.radius);
}
else {
return(0);
}
})
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var node = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.style("fill", function(d) { return color(d.cluster); })
.call(force.drag);
node.transition()
.duration(750)
.delay(function(d, i) { return i * 5; })
.attrTween("r", function(d) {
var i = d3.interpolate(0, d.radius);
return function(t) { return d.radius = i(t); };
});
setInterval(function() {
var i = Math.floor(Math.random() * m),
r = Math.sqrt((i + 1) / m * -Math.log(Math.random())) * maxRadius,
d = {cluster: i, radius: r, depth: 2};
if(d.radius < clusters[d.cluster].radius ) {
nodes.push(d);
}
node = node.data(nodes);
node.enter().append("circle")
.style("fill", function(d) { return color(d.cluster); })
.attr({r: function(d) { return(d.radius); },
cx: function(d) { return(d.x); },
cy: function(d) { return(d.y); },
})
.call(force.drag);
force.start();
}, 1000);
function tick(e) {
node
.each(cluster(e.alpha * 0.1))
.each(collide(e.alpha * 0.3))
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
// Move d to be adjacent to the cluster node.
function cluster(alpha) {
return function(d) {
var cluster = clusters[d.cluster];
if (cluster === d) return;
var x = d.x - cluster.x,
y = d.y - cluster.y,
l = Math.sqrt(x * x + y * y),
r = d.radius + cluster.radius + 10;
if (l != r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
cluster.x += x;
cluster.y += y;
}
};
}
// Resolves collisions between d and all other circles.
function collide(alpha) {
var quadtree = d3.geom.quadtree(nodes);
return function(d) {
var r = d.radius + maxRadius + Math.max(padding, clusterPadding),
nx1 = d.x - r,
nx2 = d.x + r,
ny1 = d.y - r,
ny2 = d.y + r;
quadtree.visit(function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== d)) {
var x = d.x - quad.point.x,
y = d.y - quad.point.y,
l = Math.sqrt(x * x + y * y),
r = d.radius + quad.point.radius + (d.cluster === quad.point.cluster ? padding : clusterPadding);
if (l < r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
});
};
}
}
drawAnimation();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
I found some code that displays a group of circles. I slightly modified the code to allow the user to click on any of the circles to change its radius. The problem is that that enlarged circle overlaps the other other circle. I want the other circles to move so that the larger circle doesn't overlap any of the adjacent circles. Here is the code I have:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var nodes = d3.range(200).map(function() { return {radius: Math.random() * 12 + 4}; }),
root = nodes[0],
color = d3.scale.category10();
root.radius = 0;
root.fixed = true;
var force = d3.layout.force()
.gravity(0.05)
.charge(function(d, i) { return i ? 0 : -2000; })
.nodes(nodes)
.size([width, height]);
force.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll("circle")
.data(nodes.slice(1))
.enter().append("circle")
.attr("r", function(d) { return d.radius; })
.style("fill", function(d, i) { return color(i % 3); })
.on("click", function (d) {
d3.select(this).attr("r", 30);
force.start();
});
force.on("tick", function(e) {
var q = d3.geom.quadtree(nodes),
i = 0,
n = nodes.length;
while (++i < n) q.visit(collide(nodes[i]));
svg.selectAll("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
function collide(node) {
var r = node.radius + 16,
nx1 = node.x - r,
nx2 = node.x + r,
ny1 = node.y - r,
ny2 = node.y + r;
return function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== node)) {
var x = node.x - quad.point.x,
y = node.y - quad.point.y,
l = Math.sqrt(x * x + y * y),
r = node.radius + quad.point.radius;
if (l < r) {
l = (l - r) / l * .5;
node.x -= x *= l;
node.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
};
}
</script>
I am working on a bubble chart application. At the moment though - my chart appears broken, not sure why.
I will be looking to try and animate the bubbles when new data sets come in.
http://jsfiddle.net/NYEaX/175/
setup: function(rawData, w, h){
var format = d3.format(",d"),
color = d3.scale.category20c();
var bubble = d3.layout.pack()
.sort(null)
.size([w, h])
.padding(1.5);
var svg = d3.select(methods.el).append("svg")
.attr("width", w)
.attr("height", h)
.attr("class", "bubblechart")
.attr('viewBox', "0 0 "+parseInt(w, 10)+" "+parseInt(h, 10))
.attr('perserveAspectRatio', "xMinYMid");
var root = methods.conformData(rawData);
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(root))
.filter(function(d) { return !d.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
.text(function(d) { return d.className + ": " + format(d.value); });
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.packageName); });
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.className.substring(0, d.r / 3); });
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
var classes = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
else classes.push({packageName: node.name, className: node.name, value: node.size});
recurse(null, root);
return {children: classes};
}
d3.select(self.frameElement).style("height", h + "px");
//this.resizeBubble();
}
Here is the latest bubble chart code. Although its not updating correctly for multiple charts
http://jsfiddle.net/pPMqQ/18/
animateBubbles: function(selector, data){
data = this.funnelData(data, methods.width, methods.height);
var padding = 4;
var maxRadius = d3.max(data, function (d) { return parseInt(d.radius)});
var year_centers = {
"2008": {name:"2008", x: 150, y: 300},
"2009": {name:"2009", x: 550, y: 300},
"2010": {name:"2010", x: 900, y: 300}
}
var all_center = { "all": {name:"All Grants", x: methods.width/2, y: methods.height/2}};
var bubbleholder = d3.select(selector + " .bubbleholder");
var bubbles = d3.select(selector + " .bubbles");
var labelbubble = d3.select(selector + " .labelbubble");
var nodes = bubbles.selectAll("circle")
.data(data);
// Enter
nodes.enter()
.append("circle")
.attr("class", "node")
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", 1)
.style("fill", function (d) { return methods.fill(d.label); })
.call(methods.force.drag);
// Update
nodes
.transition()
.delay(300)
.duration(1000)
.attr("r", function (d) { return d.radius; })
// Exit
nodes.exit()
.transition()
.duration(250)
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", 1)
.remove();
var labels = labelbubble.selectAll("text")
.data(data);
// Enter
labels.enter()
.append("text")
.attr("class", "title")
.text(function(d) { return d.label; })
.attr("x", function (d) { return d.x; })
.attr("y", function (d) { return d.y; })
// Update
labels
.transition()
.delay(300)
.duration(1000)
// .attr("x", function (d) { return d.x; })
//.attr("y", function (d) { return d.y; })
// Exit
labels.exit()
.transition()
.duration(250)
.remove();
draw('all');
function draw (varname) {
var foci = varname === "all" ? all_center: year_centers;
methods.force.on("tick", tick(foci, varname, .55));
methods.force.start();
}
function tick (foci, varname, k) {
return function (e) {
data.forEach(function(o, i) {
var f = foci[o[varname]];
o.y += (f.y - o.y) * k * e.alpha;
o.x += (f.x - o.x) * k * e.alpha;
});
nodes
.each(collide(.1))
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; });
labels
.each(collide(.1))
.attr("x", function (d) { return d.x; })
.attr("y", function (d) { return d.y; });
}
}
function collide(alpha) {
var quadtree = d3.geom.quadtree(data);
return function(d) {
var r = d.radius + maxRadius + padding,
nx1 = d.x - r,
nx2 = d.x + r,
ny1 = d.y - r,
ny2 = d.y + r;
quadtree.visit(function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== d)) {
var x = d.x - quad.point.x,
y = d.y - quad.point.y,
l = Math.sqrt(x * x + y * y),
r = d.radius + quad.point.radius + padding;
if (l < r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
});
};
}
},
I'm trying to draw a graph with d3.js that implements collisions between nodes.
I try the following codigo.Pero not work.
If I remove the collision detection draw but overlapping nodes ...
<html>
<head>
<title>Demo</title>
<script type="text/javascript" src="../d3.v2.js"></script>
<script type="text/javascript" src="jquery-1.8.1.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
print();
}
function print(){
var w = 960;
var h = 500;
var r = 20;
var fill = d3.scale.category20();
var force = d3.layout.force()
.gravity(.01)
.charge(-120)
.linkDistance(30)
.size([w, h]);
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
function() {
d3.json("datos.json",
function(json) {
var nodes = svg.selectAll("circle")
.data(json.nodes)
.enter()
.append("circle")
.attr("r", r - .75)
.style("fill", function(d) {return "#FF7F0E"})
.style("stroke", function(d) { return "green"; })
.style("stroke-width", function(d) { return "13px"; })
.call(force.drag);
force.nodes(json.nodes)
.on("tick", tick)
.start();
var text = svg.append("g").selectAll("g")
.data(force.nodes())
.enter()
.append("g")
.style("font-size", function(d) { return "12px"; })
.style("fill", function(d) { return "red"; })
.style("font-weight", function(d) { return "bold"; });
text.append("text")
.attr("text-anchor", "middle")
.attr("y", ".31em")
.text(function(d) { return d.name; });
function tick(e) {
nodes.each(collide(.5))
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
text.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";});
}
function collide(alpha) {
var quadtree = d3.geom.quadtree(nodes);
return function(d) {
var ratio = r,
nx1 = d.x - ratio,
nx2 = d.x + ratio,
ny1 = d.y - ratio,
ny2 = d.y + ratio;
quadtree.visit(function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== d)) {
var x = d.x - quad.point.x,
y = d.y - quad.point.y,
l = Math.sqrt(x * x + y * y),
r = d.radius + quad.point.radius +
(d.color !== quad.point.color) * padding;
if (l < r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2
|| x2 < nx1
|| y1 > ny2
|| y2 < ny1;
});
};
}
});
})();
}
</script>
</body>
</html>
If I remove the collision detection works but overlapping nodes. I need help :(