¿Hay alguna posibilidad de llevar elemento <tspan> de <texto> para d3.js delanteros usando

votos
0


Tengo problemas con las descripciones demasiado largas que son más grandes que mi marcador de posición por lo que con el fin de adaptarse a ella, decidí acortar los textos que encajan muy bien dentro de marcador de posición y añadir puntos suspensivos (...) en su extremo.

Con el fin de lograrlo Acabo de cambiar de etiqueta existente con ese texto corto. Pero también quieren tener el comportamiento para la visualización de información sobre herramientas con el nombre completo. Con el fin de añadir evento onmouseover a puntos suspensivos única, acabo de añadir un elemento a tspan etiqueta existente con su propio nombre de la clase y así sucesivamente. Y añadir a este evento tspan recién agregado. El problema es que necesito tener marcador de posición que se mantendrá en la parte superior, por lo que puede recibir eventos de ratón (esto es una especie de vista de árbol y, recieves de marcador de posición, haga clic en eventos para colapsar etc)

Así que optamos por llevar al principio sólo esto tspan, pero obviamente no está funcionando. ¿Hay alguna forma de añadir puntos suspensivos junto a esta etiqueta existente como un elemento de texto separado? Briniging etiqueta entera al inicio de obras flawlessy y puedo ver ese evento mouseover se agrega correctamente a tspan solamente. Pero de esa manera que cubra la mayor parte del área del marcador de posición. Aquí hay algo de código:

 const labelWidth = d3.select(`#label${d.data.id}`).node().textLength.baseVal.value;
                   const overflowValue = containerBBox.width - drawOptions.itemWidth
                   const pixelsPerChar = labelWidth / itemName.length;
                   const maxAllowedCharacters = Math.floor((labelWidth - overflowValue) / pixelsPerChar);
                   label.text(() => {
                            return itemName.substring(0, maxAllowedCharacters - 8)});
                   label.append('tspan')
                   .text('(...)')
                   .attr('id', `ellipsis${d.data.id}`)
                   .attr('class', 'treeItemEllipsis')
                   .attr('z-index', '-1')
                   .attr('position', 'relative')
                   .on('mouseover', () => { tip.show(itemName)})
                   .on('mouseout',() => {tip.hide()})

Podría agregar algún grupo o algo por encima de esta etiqueta, pero esto parece suficientemente a mí como truco loco. Tal vez hay una forma sencilla de hacerlo. Gracias a todos de antemano.
A continuación se muestra la imagen que puede ser útil para averiguar lo que mi problema se parece.

Publicado el 09/10/2019 a las 18:50
fuente por usuario
En otros idiomas...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more