0
151
ViewsLa información sobre herramientas de D3 no sigue al mouse
Creé una página web con múltiples gráficos usando D3 y Programación Orientada a Objetos.
Enlace de código de trabajo--> https://codepen.io/mohan-ys/pen/LYLwqrK
El problema al que me enfrento es que la información sobre herramientas no está en la ubicación del mouse, está en otro lugar. Intenté usar d3.event.pageX & d3.event.pageY en lugar de vis.mouse[0] & vis.mouse[1] que está en el código anterior pero no funciona.
Obtengo la información sobre herramientas como se muestra. Cuando el mouse está en el extremo derecho del gráfico, la información sobre herramientas se mueve más a la derecha, se acerca a algún lugar en el medio y va al otro lado cuando el cursor está en el extremo izquierdo del gráfico.
La página cambia de tamaño, ¡entonces es un comportamiento totalmente diferente!
¿Alguien puede ayudar a obtener la información sobre herramientas justo en el puntero del mouse (esquina superior izquierda en el puntero del mouse) para todos los gráficos e incluso cuando se cambia el tamaño de la página (los gráficos se escalan con el cambio de tamaño de la página).
¡La línea vertical sigue perfectamente al mouse!, por lo tanto, si hay otra forma de crear la información sobre herramientas en lugar de un div , también está bien para mí.
1 answers
Answer question0
El problema subyacente se aborda aquí, pero la respuesta no resuelve directamente su problema. Básicamente, hay un segundo argumento opcional para d3.pointer llamado target de tal manera que:
Si no se especifica el destino, el valor predeterminado es la propiedad currentTarget del evento de origen, si está disponible. Si el objetivo es un elemento SVG, las coordenadas del evento se transforman utilizando el inverso de la matriz de transformación de coordenadas de pantalla...
Puede hacer uso de este argumento según se indica a continuación que romperá su línea de seguimiento vertical si intenta y simplemente actualiza vis.mouse :
// mouse moving over canvas vis.mouse = d3.pointer(event); // keep this for the vertical tracking line vis.mouse2 = d3.pointer(event, d3.select(vis.chartLocation)); // <--- NEW VARIABLE! Ahora vis.mouse2 tiene una x y una relativa, así que utilícelas donde establezca el style del div :
d3 .select(vis.chartLocation) .selectAll("#tooltip") .html((d, i) => { vis.xDate = d.values[vis.idx - 1].date; return vis.xDate.toLocaleDateString("pt-PT"); }) .style("display", "block") .style("left", vis.mouse2[0] + "px") // use vis.mouse2 .style("top", vis.mouse2[1] + "px") // use vis.mouse2 La clave está en que su primera selección es vis.chartLocation .