SVG Symbol

by balefrost

HTML

<svg width="100" height="100" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <rect id="foo" width="10" height="20" fill="red" />
    </defs>
    <use xlink:href="foo" x="10" y="10" />
</svg>

JavaScript

var svg = d3.select("svg");
var defs = svg.select("defs");

var wrapper = defs.append("g")
    .attr("id","ex");

wrapper.append("circle")
    .attr("r","10")
    .attr("fill","orange");

wrapper.append("path")
    .attr("d","M-7.5,-7.5 L7.5,7.5 M7.5,-7.5 L-7.5,7.5")
    .attr("stroke","black")
    .attr("fill","none")
    .attr("stroke-width","5")


var inserted = svg.selectAll("use.pt").data([1, 5, 3, 7, 8]).enter();

inserted.append("use").classed("pt", true)
    .attr("x", function(d, i) { return 10 * (i + 1); })
    .attr("y", function(d) { return 10 * d; });

inserted.each(function() {

            this.setAttributeNS("http://www.w3.org/1999/xlink", "href", "ex");
    
});