追加函数中的动态返回值

时间:2014-10-17 07:04:38

标签: javascript svg d3.js

我正在使用d3 library,我想通过检查一些值来创建不同的元素。如果我这样做:

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

如果我想创建不同的元素会怎样?我试过了:

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

这似乎不起作用。

有什么替代方案?

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

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