Use D3.js to add multiple shapes in a single append, similar to how you would create a bunch of rectangles
Created
January 28, 2013 21:29
-
-
Save explunit/4659227 to your computer and use it in GitHub Desktop.
D3.js custom shapes in single append
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <html> | |
| <head> | |
| <title>D3.js Flowchart Shapes</title> | |
| <style type="text/css"> | |
| </style> | |
| </head> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script type="text/javascript"> | |
| var flow_shapes = { | |
| prep: function(height, width) { | |
| var points = [ [0,height/2], [width*.2,0], [width*.8,0], [width,height/2],[width*.8,height],[width*.2,height],[0,height/2] ] | |
| return d3.svg.line()(points); | |
| }, | |
| io: function(height, width) { | |
| var points = [ [0,height], [width*.2,0], [width,0], [width*.8,height], [0,height] ] | |
| return d3.svg.line()(points); | |
| } | |
| } | |
| var nodes = [ | |
| {NodeType: "prep", x:50, y:50, height:40, width: 160}, | |
| {NodeType: "io", x:50, y:125, height:40, width: 160}, | |
| {NodeType: "io", x:50, y:200, height:40, width: 160} | |
| ] | |
| svg = d3.select("body").append("svg:svg").attr("width", 600).attr("height", 600) | |
| svg.selectAll("path") | |
| .data(nodes).enter().append("svg:path") | |
| .attr("d", function(d) { return flow_shapes[d.NodeType](d.height, d.width);}) | |
| .attr("stroke", "black") | |
| .attr("fill", "none") | |
| .attr("transform", function(d) { | |
| return "translate(" + d.x + "," + d.y + ")" | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment