javascript - tip - mouseover d3 v4
¿Cómo agregar una información sobre herramientas a un gráfico svg? (3)
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?
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 lo que lo hace un poco doloroso
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?
¿Puedes usar simplemente el elemento SVG <title> y el navegador predeterminado que lo transmite? (Nota: esto no es lo mismo que el atributo title que puede usar en div / img / spans en html, debe ser un elemento secundario 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 desea mostrar HTML en su SVG, puede incrustar 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 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() , por ejemplo, http://phrogz.net/svg/html_location_in_svg_in_html.xhtml
La única buena manera que encontré fue usar Javascript para mover una información sobre herramientas <div> . Obviamente, esto solo funciona si tienes SVG dentro de un documento HTML, no de forma independiente. Y requiere Javascript.
function showTooltip(evt, text) {
let tooltip = document.getElementById("tooltip");
tooltip.innerHTML = text;
tooltip.style.display = "block";
tooltip.style.left = evt.pageX + 10 + ''px'';
tooltip.style.top = evt.pageY + 10 + ''px'';
}
function hideTooltip() {
var tooltip = document.getElementById("tooltip");
tooltip.style.display = "none";
}
#tooltip {
background: cornsilk;
border: 1px solid black;
border-radius: 5px;
padding: 5px;
}
<div id="tooltip" display="none" style="position: absolute; display: none;"></div>
<svg>
<rect width="100" height="50" style="fill: blue;" onmousemove="showTooltip(evt, ''This is blue'');" onmouseout="hideTooltip();" >
</rect>
</svg>
Puedes usar el elemento title como Phrogz indicó. También hay algunas buenas informaciones sobre herramientas como Tipsy de jQuery http://onehackoranother.com/projects/jquery/tipsy/ (que se puede usar para reemplazar todos los elementos del título), nvd3 de Bob Monteverde o incluso la información sobre herramientas de Twitter de su Bootstrap http://twitter.github.com/bootstrap/