javascript - Append defs tag and use it within SVG in D3.js

I am grouping 3 circles together within defs tags so they can be seen in an SVG. I have been also been remended to use the use tag so I can see this shape that is defined within defs and recreate it anywhere within the SVG. I am creating them and appending them to data using D3.js. However, My problem is when I use the use tag, it seems to me that I am creating a new SVG every time I want to display the shape that is in the defs tag. My questions are: Is there anyway to use the defs tag without using the use tag? The second question is: How can I display that shape within the defs tag many times within only one SVG without creating an SVG every time. Here is my code:

<!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="" xmlns: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=".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>

Could anyone please help with this issue? Thank you very much in advance.

<!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/2000/svg" xmlns:xlink="http://www.w3/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/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>

Could anyone please help with this issue? Thank you very much in advance.

Share Improve this question edited Dec 9, 2014 at 16:07 asked Dec 9, 2014 at 15:52 Mod 5,3617 gold badges30 silver badges49 bronze badges

What makes you think you are creating a new SVG every time ? – Ian Commented Dec 9, 2014 at 16:25
When I check the inspector in Firefox and mouseover the created shapes, it shows me as follows: use 1160x620. – Mod Commented Dec 9, 2014 at 16:27
What are you seeing in the DOM ? – Ian Commented Dec 9, 2014 at 16:44
I see the shapes in the DOM. – Mod Commented Dec 9, 2014 at 16:46
1 I have a feeling semantics are getting in the way when you mention SVG. Do you simply mean you are creating a new element every time (in which case I get it, or a specific SVG tag each time (so you have lots of nested SVGs). There are ways to reference defs without a use, for example as a fill attribute pointing to the id, but I don't think that would help here. is there a specific problem you actually trying to resolve ? I think you will end up with new elements whatever, so I'm not sure of a cleaner way than you are doing. – Ian Commented Dec 9, 2014 at 20:30

| Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5

You can define the circle group using using g element as shown below and there is no need for creating multiple 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 code

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

Note that there typo in your code. The id mySymbol is misspelled as MySymbol while creating use elements.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744292200a4567087.html

javascript - Append defs tag and use it within SVG in D3.js - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Append defs tag and use it within SVG in D3.js - Stack Overflow

1 Answer 1

相关推荐