Adding intricate SVG components onto a chosen group

Question

Adding intricate SVG components onto a chosen group

My current project involves creating an interactive schema that includes complex SVG elements, such as groups containing multiple sub-objects like rect, path, and text.

I am wondering if there is a way to store the description of these elements in a variable and then directly use it with .append() function?

Here is an example of one 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 - 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">To be completed</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 main objective is:

var complexObject = ... description of complexObject            

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

javascript d3.js svg

Answer 1

Answer №1

selection.append function allows you to customize the creation of nodes using a specified argument. You can use an object definition as a template to generate nodes as needed.

For instance, imagine defining a complex object like this:

<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>

This could be loaded from an external file using a template engine like Handlebars.

Then, you can define your enter sequence as shown below:

// HTML template to use
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 for identification
    g.setAttribute('classname', 'complexObject');

    return g;
})

// adjust positions
.attr('transform', function(d, i) {
    return "translate(0, " + (i * 40) + ")";
});

Check out the demo with embedded SVG code provided above.

Alternatively, you can load an external SVG file and clone it as demonstrated in the following example.

View the Observable version here.

Answer 2

selection.append function allows you to customize the creation of nodes using a specified argument. You can use an object definition as a template to generate nodes as needed.

For instance, imagine defining a complex object like this:

<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>

This could be loaded from an external file using a template engine like Handlebars.

Then, you can define your enter sequence as shown below:

// HTML template to use
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 for identification
    g.setAttribute('classname', 'complexObject');

    return g;
})

// adjust positions
.attr('transform', function(d, i) {
    return "translate(0, " + (i * 40) + ")";
});

Check out the demo with embedded SVG code provided above.

Alternatively, you can load an external SVG file and clone it as demonstrated in the following example.

View the Observable version here.

Answer 3

Answer №2

After coming across this helpful question on Stack Overflow about bringing a circle to the front with D3, I decided to create my own function for adding functionality to D3.

Here is the function I created to generate 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);
  }

This function allows customization of attributes such as data, x, y, radius, and fill color.

To use the function, follow these steps:

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

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

By following these steps, you can easily create your desired shape using D3. The possibilities are endless in terms of complexity.

Feel free to check out the fiddle where I experimented with this function: https://jsfiddle.net/thatoneguy/4x3rrd27/1/

Answer 4

After coming across this helpful question on Stack Overflow about bringing a circle to the front with D3, I decided to create my own function for adding functionality to D3.

Here is the function I created to generate 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);
  }

This function allows customization of attributes such as data, x, y, radius, and fill color.

To use the function, follow these steps:

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

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

By following these steps, you can easily create your desired shape using D3. The possibilities are endless in terms of complexity.

Feel free to check out the fiddle where I experimented with this function: https://jsfiddle.net/thatoneguy/4x3rrd27/1/

Adding intricate SVG components onto a chosen group

Answer №1

Answer №2

Similar questions

Upon clicking the link, the JavaScript functionality failed to activate

The element type provided is not valid: it should be a string for built-in components or a class/function for composite components. However, an object was received instead. - React Native

A Guide to Triggering a Method Upon Component Change in Angular

Encountering an issue while attempting to generate a dialog popup with jQuery

Using PHP to enhance a select statement to return data when paired with JavaScript

Verifying if form submission was done through AJAX using PHP

Angular JS function is returning before the completion of the http.get request

Tips for adjusting the margin of a print document in a printTask?

having trouble retrieving information from the input field

Problem with UV mapping when adjusting texture size

analyzing properties through unit testing

Divide the information in the table across several pages for easier printing

Displaying JSON data from the API on a webpage within a NodeJS weather application

Tips for effectively reusing the modal component in Vue.js without encountering re-render issues

Exploring deep nested writes within Prisma

What is the best way to ensure an AJAX get-request waits for the page to finish rendering before providing a response?

Issue with react-native-svg ForeignObject missing in project (React Native with Expo using TypeScript)

ordering the date and time in a reverse sequence using javascript

Vue feature allows users to save favorite films

Chosen selection is yielding tag instead of text value