Υπάρχει κάποια πιθανότητα να φέρουν <tspan> στοιχείο του <κείμενο> προς τα εμπρός χρησιμοποιώντας d3.js

ψήφοι
0


Έχω τα ζητήματα με πολύ μεγάλη περιγραφές που είναι μεγαλύτερα από ό, τι κράτησης θέσης μου, έτσι ώστε να χωρέσει, αποφάσισα να μειώσει τα κείμενα να ταιριάζει όμορφα μέσα κράτησης θέσης και προσθέστε αποσιωπητικά (...) στο τέλος της.

Για να το επιτύχει θα ήθελα απλώς αντικατασταθεί υπάρχουσα ετικέτα με αυτό το σύντομο κείμενο. Αλλά θέλω επίσης να έχει τη συμπεριφορά για την εμφάνιση συμβουλή εργαλείου με το πλήρες όνομα. Προκειμένου να προσθέσετε το συμβάν onMouseOver με αποσιωπητικά μόνο, απλά προσθέστε μια tspan στοιχείο για την υπάρχουσα ετικέτα με το δικό του όνομα της κλάσης του και ούτω καθεξής. Και προσθέσετε το συμβάν σε αυτό προστέθηκαν πρόσφατα tspan. Το πρόβλημα είναι ότι εγώ πρέπει να έχει κράτησης θέσης που διατηρούν στην κορυφή, έτσι ώστε να μπορεί να λάβει εκδηλώσεις του ποντικιού (αυτό είναι το είδος της προβολή δέντρου και, recieves κράτησης θέσης κάντε κλικ εκδηλώσεις για την κατάρρευση κλπ)

Γι 'αυτό και επέλεξε να φέρει στην κορυφή μόνο αυτό tspan, αλλά προφανώς δεν λειτουργεί. Υπάρχει κάποιος τρόπος για να προσθέσετε αυτό το ελλειπτικό δίπλα στην υπάρχουσα ετικέτα ως ξεχωριστό στοιχείο κειμένου; Briniging όλη την ετικέτα στην κορυφή flawlessy έργων και μπορώ να δω αυτό το γεγονός mouseover σωστά προστίθεται στο tspan μόνο. Αλλά με αυτόν τον τρόπο θα καλύψει το μεγαλύτερο μέρος της περιοχής της κράτησης θέσης. Εδώ είναι μερικά κωδικό:

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

Θα μπορούσα να προσθέσω κάποια ομάδα ή κάτι παραπάνω αυτήν την ετικέτα, αλλά αυτό seemes μου ως τρελό αμυχή. Ίσως υπάρχει ένας απλός τρόπος για να το πράξει. Σας ευχαριστώ όλους εκ των προτέρων.
Παρακάτω είναι η εικόνα που μπορεί να είναι χρήσιμη για να καταλάβω ποιο είναι το πρόβλημά μου μοιάζει.

Δημοσιεύθηκε 09/10/2019 στις 18:50
πηγή χρήστη
Σε άλλες γλώσσες...                            

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