javascript - 如何在不附加它的情况下创建 "svg"对象？

Question

考虑以下代码:

var svg = d3.select('#somediv').append("svg").attr("width", w).attr("height", h);

我想重构这段代码，让它看起来更像这样:

var svg = makesvg(w, h);
d3.select("#somediv").append(svg);

请注意，与第一个版本中显示的情况相反，在第二个版本中，append 不会创建“svg”对象；它只将它附加到 d3.select("#somediv")。

问题是如何实现函数makesvg。这反过来又归结为一个问题:如何在不使用 append 的情况下实例化一个“svg”对象，因为然后可以做类似的事情:

function makesvg(width, height) {
  return _makesvg().attr("width", w).attr("height", h);
}

所以我的问题归结为上面提到的假设的 _makesvg() 工厂的通用等价物是什么？

Answer 1

您可以使用以下内容:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

注意 createElementNS 的使用。这是必需的，因为 svg 元素与大多数 HTML 元素不在同一个 XHTML 命名空间中。

此代码创建一个新的 svg 元素，无论是否使用 D3，您都会这样做，然后在该单个元素上创建一个选择。

这可以稍微更简洁但更清晰且更不容易出错:

var svg = document.createElementNS(d3.ns.prefix.svg, 'svg');