javascript - 创建 SVG 元素而不渲染它们

Question

如何创建一个返回自定义 SVG 图形而不将其附加到任何内容的函数？我可以创建一个空的选择并返回吗？我目前拥有的:

function makeGraphic(svgParent) {
    return svgParent.append('circle').attrs({...});
}

这就是我想要的:

function makeGraphic() {
    return d3.makeCircle?.attrs({...});
}

svgParent.append(makeGraphic());

Answer 1

您可以在函数内创建一个带有 svg 命名空间的临时 svg 节点 - 而无需渲染 svg。然后，您可以在操作 svg 时将其视为典型节点并返回某种形状。

需要注意的是 .append() 接受标签名称或函数，因此我在下面提供的是函数而不是结果:

var svg = d3.select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height",200)
  .attr("transform", "translate(200,100)");
  
var makeCircle = function() {
  // create a temporary svg
  let svg = document.createElementNS(d3.namespaces.svg, "svg")
  // create a circle
  let circle = d3.select(svg).append("circle")
    .attr("r", 20)
    .attr("fill", "steelblue");
    
  // return a circle
  return circle.node(); 

}

svg.append(makeCircle);

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

这样你就可以制作一个更复杂的形状生成器来返回形状以供 d3.append() 之类的东西使用:

let svg = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 200);
    

var shapes = [{shape: "circle",y: 40, fill: "darkblue"},{shape:"square", y: 35},{y:40}]

svg.selectAll()
  .data(shapes)
  .enter()
  .append(shapemaker);    

function shapemaker(options = {}) {
	 let svg = document.createElementNS(d3.namespaces.svg, "svg")
	 var shape;
	 if (options.shape == "circle") {
	   shape = d3.select(svg).append("circle")
       .attr("cx", options.x ? options.x : 50)
       .attr("cy", options.y ? options.y : 50) 
       .attr("r", options.r ? options.r : 10)
       .attr("fill", options.fill ? options.fill : "steelblue" )
    }
    else if (options.shape == "square") {
      shape = d3.select(svg).append("rect")
       .attr("x", options.x ? options.x : 100)
       .attr("y", options.y ? options.y : 50) 
       .attr("width", options.width ? options.size : 10)
       .attr("height", options.width ? options.size : 10)
       .attr("fill", options.fill ? options.fill : "orange" )		
    }
    else {
      let x = options.x ? options.x : 150, y = options.y ? options.y : 50;
      shape = d3.select(svg).append("path")
        .attr("d", d3.symbol().type(d3.symbolStar).size(options.size ? options.size : 100))
        .attr("transform","translate("+[x,y]+")")
        .attr("fill", options.fill ? options.fill : "crimson")
		
    }
	 
  return shape.node();
	   
}

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