javascript - 1 回の追加で複数の図形を再利用する

Question

たくさんのフローチャート ノードがある場合:

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}
]

そして、それらすべてを長方形として表現したいのですが、これを 1 回の追加で行うのは非常に簡単です。

svg.selectAll("rect")
    .data(nodes)
  .enter().append("rect")
    .attr("x", function(d) { return d.x; })
    .attr("width", function(d) { return d.width; })
    .attr("y", function(d) { return d.y; })
    .attr("height", function(d) { return d.height; })
    .attr("stroke", "black")
    .attr("fill", "none");

しかし、タイプ (上記の例では IO と準備) に基づいて異なる形状にしたい場合はどうすればよいでしょうか?

四角形の代わりにパス関数の辞書を使用してそれを行う方法をハックしました (完全なコードはhttp://bl.ocks.org/4659227にあります)。各パス関数は、高さと幅を受け入れます。

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 + ")"
  });

しかし、これを行うためのより良い標準的な方法が必要なようです。何か案は？

また、大きなノード リストでの上記のコードのパフォーマンスについても懸念していますが、まだストレス テストを行っていません。