D3 Examples - D3.js custom shapes in single append

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
  <title>D3.js Flowchart Shapes</title>
  <style type="text/css">
  </style>
</head>
<body>
<script src="https://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>
    