block by emeeks 6850cf2d083597d36900

Particle Edges Dendrogram

Full Screen

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 tick function in d3.layout.force.

index.html

d3-glyphEdge.js