附加 defs 标签并在 D3.js 的 SVG 中使用它

Question

附加 defs 标签并在 D3.js 的 SVG 中使用它

我在defs标签内将 3 个圆圈组合在一起，以便它们可以在SVG. 我还被推荐使用该use标签，这样我就可以看到defs在SVG. 我正在创建它们并使用D3.js. 但是，我的问题是当我使用use标签时，在我看来，每次我想显示defs标签中的形状时，我都在创建一个新的 SVG 。我的问题是：有没有办法在defs不使用标签的情况下使用use标签？第二个问题是：如何在defs标签中多次显示该形状，SVG而无需SVG每次都创建一个。这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="US-ASCII">
</head>
<body>
<div id ="mainSVG">
<svg id = "packSVG" width = "1160" height = "620" style = "outline: thin solid black" 
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id= "mySymbol">
    <circle cx="200" cy="70" r="25" fill="red" />
    <circle cx="170" cy="80" r="20" fill="red" />
    <circle cx="230" cy="80" r="20" fill="red" />
    </symbol>       
</defs>
</svg>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
var dataset = [20, 60, 90, 120];
var display = d3.select("body").select("#mainSVG").select("#packSVG").selectAll("use")
  .data(dataset).enter().append("use")
  .attr("xlink:href","#MySymbol")
  .attr("transform", function (i) { i+=50; return "translate(" + i + "," + i + ")";});
</script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

有人可以帮忙解决这个问题吗？非常感谢您提前。

Answer 1

Gil*_*sha 5

您可以使用如下所示的 g 元素定义圆组，无需创建多个 svg。JSFiddle

HTML

<svg id="mainSVG" width="600" height="500">
   <defs>
    <g id="mySymbol">
        <circle cx="200" cy="70" r="25" fill="red" />
        <circle cx="170" cy="80" r="20" fill="red" />
        <circle cx="230" cy="80" r="20" fill="red" />
    </g>
  </defs>
</svg>

Run Code Online (Sandbox Code Playgroud)

Javascript代码

var dataset = [20, 60, 90, 120];

var display = d3.select("body")
   .select("#mainSVG")
   .selectAll("use")
   .data(dataset)
   .enter()
   .append("use")
   .attr("xlink:href","#mySymbol")
   .attr("transform", function (i) { i+=50; return "translate(" + i + "," + i + ")";});

Run Code Online (Sandbox Code Playgroud)

请注意，您的代码中有错字。id在创建 use 元素时mySymbol拼写错误MySymbol。

归档时间：	10 年，10 月前
查看次数：	6789 次
最近记录：	10 年，10 月前