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

我希望将它们全部表示为矩形，在单个追加中很容易实现：

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

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

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

在单个附加中重复使用多个形状

0 个答案: