Append DOM element to the D3
Solution 1
The selection.append() function accepts one of two types:
- A string which is the name of an element to create, or
- A function which is executed (applied on parent) and should return an element or HTML.
Your question wasn't very specific, so I'll do a wild guess here.
Appending custom created elements to a d3 selection
If you created your element using
var newElem = document.createElement(tagname);
or
var newElem = document.createElementNS(d3.ns.prefix.svg, tagname);
and you want to add that new element to your d3 selection then you can use this:
mySelection.node().appendChild(newElem)
This will basically append the new element to the first node from your selection. For appending the element to every node from the selection you'd need to make a loop over mySelection and call node() on every single item.
Adding multiple custom created elements works the same, but you can save yourself some work using element.cloneNode(true)
Note however that you can't use any of d3's magic on plain elements, except you wrap them in d3.select(elem)
.
Appending a d3 selection to a d3 selection
Let's assume you have two selections s1 and s2 and you want s2 to be appended to s1. If both are selections over only one element respectively, then you can simply use
s1.node().appendChild(s2.node())
or
s1.append(function() {return s2.node()})
If s1 and/or s2 are being selections over multiple elements you need to iterate over both selections first and use
s1[i].node().append(s2[j].node())
or
s1.append(function() {return s2[i].node()})
instead.
Solution 2
Try this:
d3.select("body").append(function() { return document.createElement("p") });
Related videos on Youtube
Comments
-
Jack Spektor almost 2 years
I'm using D3 for drawing on the SVG. What I want is to append DOM element or HTML to the D3, like:
task.append(function(model){ //here return html or dom };
Documentation says it's possible, but unfortunately I can't find any example or found out how to do this myself.
-
Vikram Deshmukh about 10 yearsNeed more clarity! Do you wish to add HTML elements to your canvas? What are
task
&model
? Should you not consider removing thesvg
tag? -
Vikram DeshmukhIf you wish to draw DOM elements onto a canvas then here's the link on how to do it. But if you wish to append HTML elements to canvas then I'm afraid to say that can't be done.
-
-
roland over 3 yearsOr with function:
s1.append(function() { return s2.node() });
-
Hubert Grzeskowiak over 3 yearsThanks @roland, added your suggestion to the answer.