CODEWITHSUNDEEP
javascriptd3.jssvg
David Naoures
David Naoures

Reputation: 125

Appending complex SVG elements to a selection

I have a project of interactive schema with some complex SVG elements (group with a lot of sub-objects (rect, path, text,...))

Is it possible to store the description of this type of element in a variable and use it directly with .append() like this ?

Example of object :

<g id="Titre_x5F_A11">
    <g>
        <g id="Cadre_3_">
            <rect x="13.2" y="636" class="st14" width="157.5" height="26.8"/>
            <rect x="12.3" y="636" class="st15" width="13.7" height="26.8"/>
        </g>
        <g id="IN_3_">
            <rect x="142.6" y="654.5" class="st16" width="10" height="5.7"/>
            <text transform="matrix(0.9497 0 0 1 145.6079 658.4658)" class="st17 st4 st18">IN</text>
        </g>
        <g id="OUT_3_">
            <rect x="155.9" y="654.5" class="st19" width="10" height="5.7"/>
            <text transform="matrix(0.9497 0 0 1 156.8984 658.4434)" class="st17 st4 st18">OUT</text>
        </g>
        <rect x="28.2" y="637.7" class="st20" width="111.1" height="7.4"/>
        <text id="TitreAction_18_" transform="matrix(0.9497 0 0 1 28.1768 643.1006)" class="st4 st21">A11  - &amp; xxxxxe</text>
        <rect x="28.2" y="646.7" class="st20" width="106.5" height="14.8"/>
        <text id="DescrAction_3_" transform="matrix(0.9497 0 0 1 28.1768 650.082)" class="st22 st4 st18">A compléter</text>
        <g id="IconePeople_3_">
            <circle class="st23" cx="155" cy="644.8" r="6.5"/>
            <path class="st24" d="M153.4,644.1c0.9,0.9,2.3,0.9,3.1,0c0.9-0.9,0.9-2.4,0-3.4c-0.9-0.9-2.3-0.9-3.1,0l0,0
                C152.5,641.6,152.5,643.1,153.4,644.1z M151.2,649c1.1,0,6.6,0,7.7,0c1.1,0,0.5-1.1,0.5-1.1s-2.2-2.7-4.4-2.7
                s-4.4,2.7-4.4,2.7l0,0C150.6,648,150.1,649,151.2,649z"/>
        </g>
    </g>
</g>

and my goal :

var complexObject = ... description of complexObject            

var circles = svgContainer.selectAll("complexObject")
    .data(data)
    .enter()
    .append("complexObject");

Upvotes: 2

Views: 2063

Answers (2)

nikoshr
nikoshr

Reputation: 33364

selection.append accepts a function as argument that will let you build your nodes as you wish. You could use your object definition as a template to create nodes as necessary.

To simplify the example, let's say you define your complex object as

<script type='text/template' id='Titre_x5F_A11'>
<g>
  <circle class="st23" cx="20" cy="20" r="10"/>  
  <circle class="st19" cx="50" cy="20" r="10"/>  
  <circle class="st21" cx="70" cy="20" r="10"/>  
</g>
</script>

That could be an external file you load, derived from a template engine like Handlebars, etc.

You could then define your enter sequence as

// HTML to use as template
var tpl = d3.select('#Titre_x5F_A11').html();

// selection
svgContainer.selectAll(".complexObject")
.data(data)
.enter()
.append(function() {
    //create a node
    var g = document.createElementNS("http://www.w3.org/2000/svg", "g");

    // fill with the HTML
    g.innerHTML = tpl;

    //set a class to be coherent with your selection
    g.setAttribute('classname', 'complexObject');

    return g;
})

// let's move the copies
.attr('transform', function(d, i) {
    return "translate(0, " + (i * 40) + ")";
});

And a demo with embedded SVG

var data = [{id: 1}, {id: 2}, {id: 3}];
var tpl = d3.select('#Titre_x5F_A11').html();

d3.select('svg').selectAll(".complexObject")
.data(data)
.enter()
.append(function() {
    var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
    g.innerHTML = tpl;
    g.setAttribute('classname', 'complexObject');
    return g;
})
.attr('transform', function(d, i) {
	return "translate(0, " + (i * 40) + ")";
});
.st23 {fill: red}
.st19 {fill: blue}
.st21 {fill: green}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<script type='text/template' id='Titre_x5F_A11'>
<g>
  <circle class="st23" cx="20" cy="20" r="10"/>  
  <circle class="st19" cx="50" cy="20" r="10"/>
  <circle class="st21" cx="70" cy="20" r="10"/>
</g>
</script>
<svg width='400' height='400'>

</svg>

or with a loaded file (a nice tiger1), the SVG is cloned and appended to the element

var data = [{id: 1}, {id: 2}, {id: 3}];

d3.xml('https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg', "image/svg+xml", function(error, xml) {
    if (error) throw error;
    
    d3.select('svg').selectAll(".complexObject")
    .data(data)
    .enter()
    .append(function() {
        var importedNode = document.importNode(xml.documentElement, true);
        var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
        g.appendChild(importedNode);
        g.setAttribute('classname', 'complexObject');
        return g;
    })
    .attr('transform', function(d, i) {
        return "translate(0, " + (i * 100) + "), scale(0.2)";
    });
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<svg width='400' height='400'>

</svg>

And for the fun of it, a version on Observable

1 By Ghostscript authors (GPL Ghostscript SVN: tiger.eps) [GPL (http://www.gnu.org/licenses/gpl.html)], via Wikimedia Commons

Upvotes: 4

thatOneGuy
thatOneGuy

Reputation: 10642

This is how I would do it. Thanks to this question : How can I bring a circle to the front with d3?

How to add functionality to D3.

So I created a function to create a circle : 

d3.selection.prototype.appendCircle = function(data, x,y,r,fill) {
  return this
  .data(data)
  .enter()
  .append('circle')
  .attr('cx', x)
  .attr('cy', y)
  .attr('r', r)
  .style('fill', fill);
  }

The above function has parameters, data, x, y, radius and fill, so you can customise all attributes.

Now to apply it :

var svg = d3.select('body').append('svg');

var circles = svg.selectAll('circle')
.appendCircle([1],100,100,15,'red')

And there you go, you have just created a function to create your shape :) You could make this as complex as you want.

Here is the fiddle I messed around in : https://jsfiddle.net/thatoneguy/4x3rrd27/1/

Upvotes: 1

Related Questions