追加函數動態返回值

Question

我使用的是d3 library，我想通過檢查一些值來創建不同的元素。如果我這樣做：

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

如果我想創建不同的元素會發生什麼？我試過了：

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

這似乎不起作用。

這有什麼替代？

Answer 1

正如你已經指出的那樣，.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。

Answer 2

即使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", ...); 
    } 
});