Question

我正在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>

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

Answer 1

您可以使用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>

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 + ")";});

请注意您的代码中存在拼写错误。在创建使用元素时，ID mySymbol拼写错误为MySymbol。

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

1 个答案: