Gibt es eine Möglichkeit <tspan> Element <text> nach vorne mit d3.js zu bringen

stimmen
0


Ich habe die Probleme mit zu langen Beschreibungen, die größer sind als mein Platzhalter so, um es zu passen, habe ich beschlossen, Texte zu kürzen schön in Platzhalter passen und Auslassungszeichen (...) an ihrem Ende hinzuzufügen.

Um es zu erreichen, ich vorhandenes Label mit diesem kurzen Text nur ersetzt. Aber ich mag auch das Verhalten haben für Tooltip mit vollständigen Namen angezeigt werden. Um Onmouseover Event hinzufügen nur Auslassungs, füge ich nur ein tspan Element bestehendes Etikett mit seinen eigenen Klassennamen und so weiter. Und fügt Event zu diesem neu hinzugefügten tspan. Das Problem ist, dass ich Platzhalter haben müssen, ist auf der Oberseite halten, so kann es Mausereignisse empfangen (dies ist eine Art Baumansicht und Platzhalter BEKOMMT Ereignisse klicken zum Einsturz etc)

So entschied ich mich nur dieses tspan nach oben zu bringen, aber offensichtlich nicht funktioniert. Gibt es eine Möglichkeit, diese drei Punkten neben bestehenden Label als separate Textelement anhängen? Briniging ganzes Etikett nach oben Arbeiten flawlessy und ich kann das Ereignis Mouseover sieht richtig nur tspan hinzugefügt wird. Aber auf diese Weise behandle ich den größten Teil der Fläche von Platzhalter. Hier einige Code:

 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()})

Ich könnte eine Gruppe oder etwas oberhalb dieses Etikett hinzufügen , aber diese seemes mir so verrückt Hack. Vielleicht gibt es eine einfache Möglichkeit , dies zu tun. Vielen Dank an alle im Voraus.
Im Folgenden finden Sie Bild , das hilfreich sein kann , um herauszufinden , was wie mein Problem sieht.

Veröffentlicht am 09/10/2019 um 18:50
quelle vom benutzer
In anderen Sprachen...                            

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