¿Cómo agregar una información sobre herramientas a un gráfico svg?

Tengo una serie de rectángulos svg (usando D3.js) y quiero mostrar un mensaje al pasar el ratón, el mensaje debe estar rodeado por un cuadro que actúa como fondo. Ambos deberían estar perfectamente alineados entre sí y con el rectángulo (arriba y centrado). ¿Cuál es la mejor manera de hacer esto?¿Cómo agregar una información sobre herramientas a un gráfico svg?

Intenté agregar un texto svg usando los atributos "x", "y", "ancho" y "alto", y luego anteponer un svg rect. El problema es que el punto de referencia para el texto está en el medio (dado que quiero que esté alineado centrado usé text-anchor: middle), pero para el rectángulo es la coordenada superior izquierda, además quería un poco de margen alrededor del texto que lo hace más amable de un dolor

La otra opción era usar un div html, lo que sería bueno, porque puedo agregar el texto y el relleno directamente, pero no sé cómo obtener las coordenadas absolutas para cada rectángulo. ¿Hay alguna forma de hacer esto?

Fuente

2012-05-17 nachocab

Si no hay otra manera, supongo – nachocab

es que un problema , utilizando marcado para lo que fue diseñado? – Phrogz

Es solo que no se ve tan bien, pero agradezco su respuesta – nachocab

Puede usar el elemento de título como lo indica Phrogz. También hay algunos buenos información sobre herramientas como Tipsy http://onehackoranother.com/projects/jquery/tipsy/ (que puede ser usado para reemplazar todos los elementos del título), nvd3 de Bob Monteverde de jQuery o incluso información sobre herramientas de Twitter desde su Bootstrap http://twitter.github.com/bootstrap/

Fuente

2012-05-17 21:06:19 paxRoman

¿Se puede usar simplemente el SVG <title> element y el navegador predeterminado que lo transmite? (Nota: esto es no el mismo que el title atributo que puede utilizar en div/img/se extiende en html, es necesario que haya un elemento hijo llamado title)

rect { 
 
    width: 100%; 
 
    height: 100%; 
 
    fill: #69c; 
 
    stroke: #069; 
 
    stroke-width: 5px; 
 
    opacity: 0.5 
 
}

<p>Mouseover the rect to see the tooltip on supporting browsers.</p> 
 

 
<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <rect> 
 
    <title>Hello, World!</title> 
 
    </rect> 
 
</svg>

Alternativamente, si realmente quiere mostrar HTML en su SVG, puede incrustar código HTML directamente:

rect { 
 
    width: 100%; 
 
    height: 100%; 
 
    fill: #69c; 
 
    stroke: #069; 
 
    stroke-width: 5px; 
 
    opacity: 0.5 
 
} 
 

 
foreignObject { 
 
    width: 100%; 
 
} 
 

 
svg div { 
 
    text-align: center; 
 
    line-height: 150px; 
 
}

<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <rect/> 
 
    <foreignObject> 
 
    <body xmlns="http://www.w3.org/1999/xhtml"> 
 
     <div> 
 
     Hello, <b>World</b>! 
 
     </div> 
 
    </body>  
 
    </foreignObject> 
 
</svg>

... pero entonces necesitaría JS para encender y apagar la pantalla. Como se muestra arriba, una forma de hacer que la etiqueta aparezca en el lugar correcto es ajustar el rect y el HTML en el mismo <g> que los coloca juntos.

Para usar JS para encontrar dónde se encuentra un elemento SVG en la pantalla, puede usar getBoundingClientRect(), p. Ej. http://phrogz.net/svg/html_location_in_svg_in_html.xhtml

Fuente

2012-05-17 21:06:16 Phrogz

¡Funciona muy bien para mí insertar el título de un elemento svg! –

Buena respuesta. Pero tenga en cuenta que 'foreignObject' [no es compatible con Internet Explorer] (https://caniuse.com/#search=foreignObject) –

¿Cómo agregar una información sobre herramientas a un gráfico svg?

Respuesta

Cuestiones relacionadas