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

追加函数中的动态返回值

2 个答案: