追加函数中的动态返回值

Dynamic returned values in append function

本文关键字：动态 返回值 函数 追加      更新时间：2023-09-26

我使用的是d3库，我想通过检查一些值来创建不同的元素。如果我这样做：

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语句来处理每个元素类型，但在实践中，您需要这样做，因为您需要设置的属性不同（除非您想为所有内容设置所有内容）。

在此处完成演示。

即使append函数接受一个函数，我也不确定它应该如何工作（也许有人揭示了这一点）。然而，以下解决方案是可读的，易于实现：

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", ...);
   }
});
相关文章：