Skip to content

Instantly share code, notes, and snippets.

@davelandry

davelandry/README.md

Last active August 22, 2016 15:24
Show Gist options
  • Save davelandry/9956853 to your computer and use it in GitHub Desktop.
Save davelandry/9956853 to your computer and use it in GitHub Desktop.
Download ZIP
Edge Directional Arrows in a Network
Raw
README.md

The "arrows" property of the .edges( ) method toggles the visibility of edge directional arrows. The directionality defaults to pointing at the "target" node.

Featured on D3plus.org

Raw
index.html
<!doctype html>
<meta charset="utf-8">
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
<script>
var sample_data = [
{"name": "alpha", "size": 10},
{"name": "beta", "size": 12},
{"name": "gamma", "size": 30},
{"name": "delta", "size": 26},
{"name": "epsilon", "size": 12},
{"name": "zeta", "size": 26},
{"name": "theta", "size": 11},
{"name": "eta", "size": 24}
]
var positions = [
{"name": "alpha", "x": 10, "y": 15},
{"name": "beta", "x": 12, "y": 24},
{"name": "gamma", "x": 16, "y": 18},
{"name": "delta", "x": 26, "y": 21},
{"name": "epsilon", "x": 13, "y": 4},
{"name": "zeta", "x": 31, "y": 13},
{"name": "theta", "x": 19, "y": 8},
{"name": "eta", "x": 24, "y": 11}
]
var connections = [
{"source": "alpha", "target": "beta"},
{"source": "alpha", "target": "gamma"},
{"source": "beta", "target": "delta"},
{"source": "beta", "target": "epsilon"},
{"source": "zeta", "target": "gamma"},
{"source": "theta", "target": "gamma"},
{"source": "eta", "target": "gamma"}
]
var visualization = d3plus.viz()
.container("#viz")
.type("network")
.data(sample_data)
.nodes(positions)
.edges(connections)
.edges({"arrows": true})
.size("size")
.id("name")
.draw()
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment