追加函数动态返回值

问题描述：

我使用的是d3 library，我想通过检查一些值来创建不同的元素。如果我这样做：追加函数动态返回值

elements.append("rect").attr(...);

如果我想创建不同的元素会发生什么？我试过了：

elements.append(function (d) { 
    if (d.foo) { 
     return "rect"; 
    } 
    return "circle"; 
});

这似乎不起作用。

这有什么替代？

答

正如你已经指出的那样，.append()接受返回的DOM元素附加功能。这看起来如下。

var data = ["circle", "rect"]; 

d3.select("svg").selectAll(".shape").data(data) 
    .enter() 
    .append(function(d) { 
    return document.createElementNS(d3.ns.prefix.svg, d); 
    });

当然你还需要正确设置所有的属性，这是其中的关键 - 你并不需要太多的if/switch语句来处理每个元素类型的原则，但在实践中你这样做是因为你需要设置的属性不同（除非你想要设置所有的东西）。

完整演示here。

我明白了。谢谢。我正在与d3合作，可能我会问更多关于d3的问题。所以，准备好。：d – 2014-10-17 08:31:53

答

即使append function accepts a function，我不知道这应该如何工作（也许有人在这里带来的光）。然而，下面的解决方案是人类可读的，容易实现：

elements.each(function (d) { 
    var el = d3.select(this); 
    var type = "circle"; 
    if (el.foo) { 
     type = "rect"; 
    } 
    var aType = el.append(type); 
    if (type === "rect") { 
     aType.attr("rx", 5) 
      .attr("ry", 5) 
      .attr("height", ...) 
      .attr("width", ...); 
    } else if (type === "circle") { 
     aType.attr("r", ...); 
    } 
});

追加函数动态返回值

相关推荐