Elijah Meeks emeeks

Variable offset animation fun.

Particle edges from d3_glyphEdges are the most difficult edge type to implement. Here's an example using a dendrogram and the connecting paths from the dendrogram. Remember that d3_glyphEdge.mutate.particle mutates the edge data object, spawning new particles, updating the position of existing particles and deleting particles that have reached the end of the path, and it's this array that you use to represent the particles (either with SVG as in this example or, if you're dealing with a lot of particles, probably canvas). As such, an edge object needs to have, along with .source and .target, .frequency (a positive number) to indicate the number of particles created per tick and .particles (an array) to hold the created particles.

d3_glyphEdge.mutate.particle does not include its own tick function so you need to create your own. This example uses d3.timer whereas this network example uses the built-in ti

	(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
	typeof define === 'function' && define.amd ? define('d3-glyphEdge', ['exports'], factory) :
	factory((global.d3_glyphEdge = {}));
	}(this, function (exports) { 'use strict';

	function halfArrow(d, nodeTargetSize, bodySize, headSize) {
	var diffX = d.target.y - d.source.y;
	var diffY = d.target.x - d.source.x;


	<!DOCTYPE html>

	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Sankey Particles</title>
	<style>
	.node rect {
	cursor: move;

	d3.sankey = function() {
	var sankey = {},
	nodeWidth = 24,
	nodePadding = 8,
	size = [1, 1],
	nodes = [],
	links = [];

	sankey.nodeWidth = function(_) {
	if (!arguments.length) return nodeWidth;

	d3.sankey = function() {
	var sankey = {},
	nodeWidth = 24,
	nodePadding = 8,
	size = [1, 1],
	nodes = [],
	links = [];

	sankey.nodeWidth = function(_) {
	if (!arguments.length) return nodeWidth;

	d3.sankey = function() {
	var sankey = {},
	nodeWidth = 24,
	nodePadding = 8,
	size = [1, 1],
	nodes = [],
	links = [];

	sankey.nodeWidth = function(_) {
	if (!arguments.length) return nodeWidth;

	(function() {

	d3.hexbin = function() {
	var width = 1,
	height = 1,
	r,
	x = d3_hexbinX,
	y = d3_hexbinY,
	dx,
	dy;