javascript - bootstrap - tooltip jquery
D3.js: ¿Coloca los tooltips usando la posición del elemento, no la posición del mouse? (3)
Estoy usando D3 para dibujar un gráfico de dispersión. Me gustaría mostrar información sobre herramientas cuando el usuario pasa sobre cada círculo.
Mi problema es que puedo agregar información sobre herramientas, pero están posicionados con el evento del mouse d3.event.pageX y d3.event.pageY , por lo que no se colocan de forma consistente sobre cada círculo.
En cambio, algunos están ligeramente a la izquierda del círculo, otros a la derecha, depende de cómo el mouse del usuario ingrese al círculo.
Este es mi código:
circles
.on("mouseover", function(d) {
tooltip.html(d)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition().duration(500).style("opacity", 0);
});
Y es un JSFiddle que muestra el problema: http://jsfiddle.net/WLYUY/5/
¿Hay alguna forma en que pueda usar el centro del círculo como la posición para orientar la información sobre herramientas, no la posición del mouse?
En su caso particular, puede simplemente usar d para colocar la información sobre herramientas, es decir,
tooltip.html(d)
.style("left", d + "px")
.style("top", d + "px");
Para hacer esto un poco más general, puede seleccionar el elemento que está siendo desplazado y obtener sus coordenadas para colocar la información sobre herramientas, es decir,
tooltip.html(d)
.style("left", d3.select(this).attr("cx") + "px")
.style("top", d3.select(this).attr("cy") + "px");
Soy nuevo en D3, así que esto puede no funcionar para los diagramas de dispersión ... pero encontré que parece funcionar para gráficos de barras ... donde v1 y v2 son los valores que se trazan ... y parece buscar el valor de los datos formación.
.on("mouseover", function(d) {
divt .transition()
.duration(200)
.style("opacity", .9);
divt .html(d.v1)
.style("left", x(d.v2)+50 + "px")
.style("top",y(d.v1)+ "px");})
here encontré algo que podría resolver su problema incluso si <body> y <svg> tienen una posición diferente. Esto supone que tienes una posición absolute establecida para tu información sobre herramientas.
.on("mouseover", function(d) {
var matrix = this.getScreenCTM()
.translate(+ this.getAttribute("cx"), + this.getAttribute("cy"));
tooltip.html(d)
.style("left", (window.pageXOffset + matrix.e + 15) + "px")
.style("top", (window.pageYOffset + matrix.f - 30) + "px");
})