javascript - d3 append() 带函数参数

Question

这个有效:

// A
d3.select("body").selectAll(".testDiv")
  .data(["div1", "div2", "div3"])
  .enter().append("div")
    .classed("testDiv", true)
    .text(function(d) { return d; });

下面的代码片段是相同的，除了追加的参数，而不是如上所述是“div”，是一个简单地返回“div”的函数(d):

// B
d3.select("body").selectAll(".testDiv")
  .data(["div1", "div2", "div3"])
  .enter().append(function(d) { return "div"; })
    .classed("testDiv", true)
   .text(function(d) { return d; });

B，然而，不起作用，而是返回错误信息“未捕获的类型错误:无法在‘节点’上执行‘appendChild’:参数 1 不是类型为“节点”。”

“div”作为 append() 的参数与 function(d) { return “div”; 有何不同？ }?

Answer 1

简短的回答是，如果您给 append 一个函数作为参数，该函数必须返回一个 DOM 元素。 append 方法的文档指出:

The name may be specified either as a constant string or as a function that returns the DOM element to append.

以下是将函数作为参数的 append 的有效用法:

.append(function() { return document.createElement('div');});

由于下面的代码不返回 DOM 元素，因此它会被认为是无效的。

.append(function() { return 'div';});

原因可以看源码:

  d3_selectionPrototype.append = function(name) {
    name = d3_selection_creator(name);
    return this.select(function() {
      return this.appendChild(name.apply(this, arguments));
    });
  };

  function d3_selection_creator(name) {
    function create() {
      var document = this.ownerDocument, namespace = this.namespaceURI;
      return namespace ? document.createElementNS(namespace, name) : document.createElement(name);
    }
    function createNS() {
      return this.ownerDocument.createElementNS(name.space, name.local);
    }
    return typeof name === "function" ? name : (name = d3.ns.qualify(name)).local ? createNS : create;
  }

如您所见，如果 typeof name === "function"(靠近底部)为真，则 create 或 createNS 函数是从来没有打电话。由于 appendChild 只接受一个 DOM 元素，因此给定的追加函数必须是一个 DOM 元素。