enjalot/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Mouseover to repel nodes. Adapted from my talk on force layouts. Compare to the canvas version.
forked from mbostock's block: Collision Detection

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<style>
  line.link {
    pointer-events: none;
  }
</style>
<script>

var width = 960,
    height = 500;


var circles = d3.range(10).map(function(i) {
  return {
    radius: Math.random() * 12 + 8,
    index: i,
    radius: 15,
    group: Math.floor((i)/4) % 4
  };
})
var nodes = [{index: -1, group: -1, radius: 200 }].concat(circles)

//var circles = nodes.slice(1)
var links = [
  {source: circles[0], target: circles[1], type: "bond"},
  {source: circles[1], target: circles[2], type: "bond"},
  {source: circles[2], target: circles[3], type: "bond"},
  {source: circles[3], target: circles[0], type: "bond"},
];

var root = nodes[0];
var 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 : -200; })
    //.linkStrength(function(l, i) { return l.strength || 0 })
		//.linkStrength(0.5)
    //.linkDistance(10)
    .nodes(nodes)
    .size([width, height]);

force.start();


var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.selectAll("circle")
    .data(circles)
  .enter().append("circle").classed("node", true)
    .attr("r", function(d) { return d.radius; })
    .style("fill", function(d, i) { return color(d.group); })
  .on("mouseout", splitNode)
.call(force.drag)

function splitNode(d) {
  var nodes = force.nodes()
  console.log("d", d)

  var index = nodes.length;
  var jiggle = 5 + Math.random() * 10;

  var newNode = {
    index: index,
    radius: Math.random() * 12 + 8,
    group: d.group,
    x: d.x + jiggle,
    y: d.y + jiggle,
    px: d.px + jiggle,
    py: d.py + jiggle
  }
  nodes.push(newNode)

  var newLink = {
    source: d, target: newNode, type: "bond"
  }
  links.push(newLink)

  svg.append("circle")
  .datum(newNode)
    .classed("node", true)
    .style("fill", function(d, i) { return color(d.group); })
  .call(force.drag)
  .on("mouseout", splitNode)


  svg.append("line")
  .datum(newLink)
  .classed("link", true)
  .attr({
  stroke: "#111"
})

}

svg.selectAll("line")
  .data(links)
.enter().append("line").classed("link", true)
.attr({
  stroke: "#111"
})

force.on("tick", function(e) {
  var nodes = force.nodes()

  // collision detection
  var q = d3.geom.quadtree(nodes);
  nodes.forEach(function(node) {
    q.visit(collide(node))
  })

  // strongly coupling certain nodes
  links.forEach(function(link) {
    var source = link.source;
    var target = link.target;
    if(link.type == "bond") {
      var x = source.x - target.x;
      var y = source.y - target.y;
      var dist = Math.sqrt(x * x + y * y);
      var r = source.radius + target.radius;

      if (dist < r) {
        dist = (dist - r) / dist * .5; //don't quite understand this
        source.x -= x *= dist;
        source.y -= y *= dist;
        target.x += x;
        target.y += y;
      } else {
        dist = -0.021; // not sure how to do the opposive of above
        source.x += x *= dist;
        source.y += y *= dist;
        target.x -= x;
        target.y -= y;
      }
    }
    link.strength = 1;
  })


  svg.selectAll("circle.node")
  .attr({
    cx: function(d) {return d.x },
    cy: function(d) { return d.y },
    r: function(d) { return d.radius }
  })

  svg.selectAll("line.link")
  .attr({
    x1: function(d) { return d.source.x },
    y1: function(d) { return d.source.y },
    x2: function(d) { return d.target.x },
    y2: function(d) { return d.target.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,
          dist = Math.sqrt(x * x + y * y),
          r = node.radius + quad.point.radius;
      if (dist < r) {
        dist = (dist - r) / dist * .5;
        node.x -= x *= dist;
        node.y -= y *= dist;
        quad.point.x += x;
        quad.point.y += y;
      }
    }
    return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
  };
}

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<style>
	line.link {
	pointer-events: none;
	}
	</style>
	<script>

	var width = 960,
	height = 500;


	var circles = d3.range(10).map(function(i) {
	return {
	radius: Math.random() * 12 + 8,
	index: i,
	radius: 15,
	group: Math.floor((i)/4) % 4
	};
	})
	var nodes = [{index: -1, group: -1, radius: 200 }].concat(circles)

	//var circles = nodes.slice(1)
	var links = [
	{source: circles[0], target: circles[1], type: "bond"},
	{source: circles[1], target: circles[2], type: "bond"},
	{source: circles[2], target: circles[3], type: "bond"},
	{source: circles[3], target: circles[0], type: "bond"},
	];

	var root = nodes[0];
	var 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 : -200; })
	//.linkStrength(function(l, i) { return l.strength \|\| 0 })
	//.linkStrength(0.5)
	//.linkDistance(10)
	.nodes(nodes)
	.size([width, height]);

	force.start();


	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	svg.selectAll("circle")
	.data(circles)
	.enter().append("circle").classed("node", true)
	.attr("r", function(d) { return d.radius; })
	.style("fill", function(d, i) { return color(d.group); })
	.on("mouseout", splitNode)
	.call(force.drag)

	function splitNode(d) {
	var nodes = force.nodes()
	console.log("d", d)

	var index = nodes.length;
	var jiggle = 5 + Math.random() * 10;

	var newNode = {
	index: index,
	radius: Math.random() * 12 + 8,
	group: d.group,
	x: d.x + jiggle,
	y: d.y + jiggle,
	px: d.px + jiggle,
	py: d.py + jiggle
	}
	nodes.push(newNode)

	var newLink = {
	source: d, target: newNode, type: "bond"
	}
	links.push(newLink)

	svg.append("circle")
	.datum(newNode)
	.classed("node", true)
	.style("fill", function(d, i) { return color(d.group); })
	.call(force.drag)
	.on("mouseout", splitNode)


	svg.append("line")
	.datum(newLink)
	.classed("link", true)
	.attr({
	stroke: "#111"
	})

	}

	svg.selectAll("line")
	.data(links)
	.enter().append("line").classed("link", true)
	.attr({
	stroke: "#111"
	})

	force.on("tick", function(e) {
	var nodes = force.nodes()

	// collision detection
	var q = d3.geom.quadtree(nodes);
	nodes.forEach(function(node) {
	q.visit(collide(node))
	})

	// strongly coupling certain nodes
	links.forEach(function(link) {
	var source = link.source;
	var target = link.target;
	if(link.type == "bond") {
	var x = source.x - target.x;
	var y = source.y - target.y;
	var dist = Math.sqrt(x * x + y * y);
	var r = source.radius + target.radius;

	if (dist < r) {
	dist = (dist - r) / dist * .5; //don't quite understand this
	source.x -= x *= dist;
	source.y -= y *= dist;
	target.x += x;
	target.y += y;
	} else {
	dist = -0.021; // not sure how to do the opposive of above
	source.x += x *= dist;
	source.y += y *= dist;
	target.x -= x;
	target.y -= y;
	}
	}
	link.strength = 1;
	})


	svg.selectAll("circle.node")
	.attr({
	cx: function(d) {return d.x },
	cy: function(d) { return d.y },
	r: function(d) { return d.radius }
	})

	svg.selectAll("line.link")
	.attr({
	x1: function(d) { return d.source.x },
	y1: function(d) { return d.source.y },
	x2: function(d) { return d.target.x },
	y2: function(d) { return d.target.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,
	dist = Math.sqrt(x * x + y * y),
	r = node.radius + quad.point.radius;
	if (dist < r) {
	dist = (dist - r) / dist * .5;
	node.x -= x *= dist;
	node.y -= y *= dist;
	quad.point.x += x;
	quad.point.y += y;
	}
	}
	return x1 > nx2 \|\| x2 < nx1 \|\| y1 > ny2 \|\| y2 < ny1;
	};
	}

	</script>