Ajouter l'élément DOM au D3

J'utilise D3 pour dessiner sur SVG. Ce que je veux, c'est d'ajouter l'élément DOM ou HTML à la D3, comme:

task.append(function(model){ //here return html or dom }; 

La documentation indique que c'est possible, mais malheureusement, je ne trouve aucun exemple ou j'ai compris comment procéder moi-même.

La fonction selection.append () accepte l'un des deux types:

  • Une chaîne qui est le nom d'un élément à créer, ou
  • Une fonction qui est exécutée (appliquée sur parent) et doit renvoyer un élément ou un code HTML.

Votre question n'était pas très spécifique, alors je vais faire une estimation sauvage ici.

Ajout d'éléments créés personnalisés à une sélection d3

Si vous avez créé votre élément en utilisant

 var newElem = document.createElement(tagname); 

ou

 var newElem = document.createElementNS(d3.ns.prefix.svg, tagname); 

Et vous souhaitez ajouter ce nouvel élément à votre sélection d3, vous pouvez l'utiliser:

 mySelection.node().appendChild(newElem) 

Cela ajoutera essentiellement le nouvel élément au premier noeud de votre sélection. Pour ajouter l'élément à chaque noeud à partir de la sélection, vous devriez faire une boucle sur mySelection et le nœud d'appel () sur chaque élément.

L'ajout de plusieurs éléments créés personnalisés fonctionne de la même manière, mais vous pouvez vous épargner du travail en utilisant element.cloneNode(true)

Notez cependant que vous ne pouvez pas utiliser la magie de d3 sur des éléments simples, sauf que vous les enveloppez dans d3.select(elem) .

Ajout d'une sélection d3 à une sélection d3

Supposons que vous avez deux sélections s1 et s2 et que vous souhaitez que s2 soit ajouté à s1. Si les deux sont des sélections sur un seul élément respectivement, vous pouvez simplement utiliser

 s1.node().appendChild(s2.node()) 

Si s1 et / ou s2 sont des sélections sur plusieurs éléments, vous devez d'abord itérer sur les deux sélections et utiliser s1[i].node().append(s2[j].node()) place.

Essaye ça:

 d3.select("body").append(function() { return document.createElement("p") });