d3js append div

Intenté agregar algunos mensajes emergentes junto al nodo, pero se ve como cualquier otra cosa, entonces el texto svg y la imagen no se pueden mostrar con append.d3js append div

node.append("text") 
     .attr("dx", 16) 
     .attr("dy", ".0em") 
     .text(function(d) { return d.name });

obras y añade el texto pero he intentado añadir un div y no es visible, node.append ("div"). ¿Hay algo que me falta aquí? también cómo puedo obtener fácilmente la posición de nodo para poder transferir los atributos a otro elemento.

Fuente

2012-07-04 BlitzCrank

No puede colocar elementos HTML en ningún lugar de un SVG, debe encerrarlos en un elemento foreignObject, consulte here. Si encierra tanto el elemento text como el foreignObject en un grupo SVG (elemento g) y establece la posición en eso, ambos deben aparecer en el mismo lugar sin la necesidad de establecer la misma posición en ambos.

Fuente

2012-07-04 07:54:44

bien así que la pregunta era otra cosa, ya tengo el Grupo G y si Añado el elemento que no necesito para establecer la posición, entonces, ¿cómo puedo agregar un div? quiero modificar el div más tarde para la apariencia, pero no aparece, es invisible – BlitzCrank

Como ya he dicho, es necesario colocar elementos HTML, como 'div', dentro de un elemento' foreignObject'. Debería poder seleccionar y modificar sus atributos más tarde usando los selectores normales. –

svg.append ("foreignObject") .attr ("ancho", 480) .attr ("alto", 500) .append ("xhtml: div") .style ("font", "14px ' Helvetica Neue '") .html (' asd '); – BlitzCrank

Alternativamente, puede definir su código html fuera de svg en su 'div propio. A continuación, agregue el contenido por clase usando:

d3.select("#nytg-tooltip").style('top',ypos+"px").style('left',xpos+"px").style('display','block');

Como se ve en este ejemplo:

http://www.nytimes.com/interactive/2012/10/15/us/politics/swing-history.html?_r=0

enter image description here

Fuente

2013-05-17 15:33:43 jonincanada

Aquí hay un buen tutorial solo para ese método: http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html – Maggie

Respuesta

Cuestiones relacionadas