如何用d3加载svg文件？

Question

我正在尝试加载一堆SVG图像文件（我现在只有一个，但我会有更多）来制作一种工具栏。因此，我使用具有文件名的对象设置我的选择数据。然后我调用enter()，然后我尝试用函数调用append()来根据数据加载不同的SVG元素，但我只是在那里得到错误。从查看错误来看，似乎d3假设append的参数是一个字符串，但文档说你也可以传递一个函数。我是否正确地执行此操作，或者是否有更简单的方法来加载SVG文件？ （加载SVG的实际功能可能不起作用，我还没有开始工作，但这不是当前的问题）

toolbarBtns.selectAll('.toolbar-btn')
      .data([
        {
          img: 'img/erase.svg',
          onclick: function() {
            clear();
            update();
          }
        }
      ])
      .enter()
      .append(function(d) {
        var btn = null;
        d3.xml(d.img, 'image/svg+xml', function(xml) {
          btn = this.appendChild(xml.documentElement);
        });
        while (!btn)
          ;
        console.log(btn);
        return btn;
      })
      .attr('class', 'toolbar-btn')
      .attr('width', '40')
      .attr('height', '40')
      .attr('x', function(d, i) {
        return 5 + i * 40;
      })
      .attr('y', '5')
      .on('mouseover', function() {
        d3.select(this).select('svg circle')
                .attr('fill', 'red');
      })
      .on('mouseout', function() {
        d3.select(this).select('svg circle')
                .attr('fill', 'none');
      })
      .on('click', function(d, i) {
        d.onclick.apply(this, [d, i]);
      });