Creating and appending detached elements with d3.create

by

Just namespace it:

const detachedG = d3.create('svg:g');

Here is the code with that change:

<!doctype html>
<html lang="en">
    <head><script src="https://d3js.org/d3.v5.min.js"></script></head>
    <body>
        <svg></svg>
        <script>
            const svg = d3.select('svg');
            const g = svg.append('g');

            const detachedG = d3.create('svg:g');
            detachedG.selectAll('g')
                .data([5,10,20,40])
                .enter()
                .append('rect')
                .attr('fill', 'green')
                .attr('x', d => d)
                .attr('y', d => d)
                .attr('height', d => d)
                .attr('width', d => d);

            g.append(() => detachedG.node());
        </script>
    </body>
</html>

Explanation

When appending SVG elements with the append() method, 98.47% of D3 programmers don’t use namespaces (source: Fakedata Inc.). Therefore, instead of:

selection.append("svg:rect")

We normally just do:

selection.append("rect")

So, why do you need a namespace here?

Internally, d3.create uses d3.creator calling it with document.documentElement:

export default function(name) {
    return select(creator(name).call(document.documentElement));
}

That changes the this for the d3.creator method. We normally don’t use namespaces when we create SVG elements using append (which internally uses d3.creator), since:

If no namespace is specified, the namespace will be inherited from the parent element.

However, because of the use of document.documentElement as this, the namespace becomes necessary in this case.

More Related Contents:

  1. Scaling d3 v4 map to fit SVG (or at all)
  2. How to add a tooltip to an svg graphic?
  3. Replacing d3.transform in D3 v4
  4. How do I include newlines in labels in D3 charts?
  5. How can d3.transform be used in d3 v4?
  6. Updating SVG Element Z-Index With D3
  7. D3 Appending Text to a SVG Rectangle
  8. d3 add text to circle
  9. In d3, how to get the interpolated line data from a SVG line?
  10. Label outside arc (Pie chart) d3.js
  11. D3js take data from an array instead of a file
  12. Why does d3.js v3 break my force graph when implementing zooming when v2 doesn’t?
  13. Where is d3.svg.diagonal()?
  14. How to draw a path smoothly from start point to end point in D3.js
  15. (Embed and) Refer to an external SVG via D3 and/or javascript
  16. Plotting points on a map with D3
  17. D3 fill shape with image using pattern
  18. D3 – how to deal with JSON data structures?
  19. Setting rounded corners for svg:image
  20. Circles in Map Displayed Incorrect Location in D3 V4
  21. How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
  22. svg / d3.js rounded corners on one side of a rectangle
  23. Add names of the states to a map in d3.js
  24. Add text label to d3 node in Force directed Graph and resize on hover
  25. How do I return y coordinate of a path in d3.js?
  26. Display an arrow head in the middle of D3 force layout link
  27. Calculate SVG Path Centroid with D3.js
  28. Can’t make paths draw growing slowly with D3
  29. draw text in d3 arc javascript
  30. D3 put arc labels in a Pie Chart if there is enough space

Leave a Comment