0

如果我有一堆流程图节点：

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

但似乎必须有更好的标准方法来做到这一点。有任何想法吗？

我还担心上述代码在大型节点列表上的性能，尽管我还没有对其进行任何压力测试。

4

0 回答 0