javascript - 使用 d3 生成标记但不操作 DOM？

Question

给定以下代码，我可以将 svg 圆附加到 body 标签。

d3.select("body")
  .append("svg")
  .append("circle")
    .attr("cx", 30)
    .attr("cy", 30)
    .attr("r", 20);

但是假设我想使用 d3 来生成标记:

<svg><circle cx="30" cy="30" r="20"/></svg>

并将其分配给一个 javascript 变量，最终呈现在页面上。在这种情况下，我不希望 d3 直接操作 DOM，但我想使用它的魔力来生成我的标记。

我该怎么做。

Answer 1

您可以使用轻量级的 DocumentFragment 创建一个不属于实际 DOM 树的内存树。因为DocumentFragment接口(interface)继承自 Node接口(interface)，您可以轻松地将其包装在 D3 选择中，并从新的虚拟 根开始执行正常的 D3 操作。完成后，可以从 outerHTML 获得所需的源字符串。根节点的属性，即您附加的 <svg> .

// Create a document fragment in memory and wrap a D3 selection around it.
var doc = d3.select(document.createDocumentFragment());

// Do your normal D3 stuff.
var svg = doc.append("svg")
svg.append("circle")
  .attr("cx", 30)
  .attr("cy", 30)
  .attr("r", 20);

// 1. Obtain your source string from the outerHTML property.
var svgString = svg.node().outerHTML;
console.dir(svgString);

// 2. You can run a normal selection on the root
// This variant does not even require keeping a
// reference to the appended elements.
svgString = doc.select("svg").node().outerHTML;
console.dir(svgString);

<script src="https://d3js.org/d3.v4.js"></script>

注意:正如我刚刚意识到的那样，有一个缺点，因为 IE 仍然不支持 innerHTML或 outerHTML SVG 内容的属性。因此，如果您需要支持 IE，则此方法不是可行的解决方案。