D3 in Vue3 - rectangles niet aan rows toegevoegd

[Red devil]

Beste tweakerts,

Deze vraag is gekoppeld aan een voorgaande vraag, maar nu heb ik een issue met D3.

Dit is hoe het eruit zou moeten zien:



En dit is hoe het er in Vue uit ziet:


Betreft een versie die ik heb omgezet naar Vue3. Als ik de onderliggende elementen inspecteer, dan zie ik dat de cellen die aan elke row zouden moeten toegevoegd aan de main HTML.

Hier is de betreffende code online te editten: https://codesandbox.io/s/...iserables.vue:33765-33857




[edit]
Probleem inmiddels opgelost. Het probleem lag bij de Vue methode die geen toegang had tot de this scope. Fix was toevoegen van een function in de mounted component en die te voorzien van een variable die verwijst naar de this scope.

[ Voor 6% gewijzigd door Red devil op 22-03-2022 10:36 ]

[farlane]

Lijkt zowel op X als Y as een of-by-one in te zitten.

[Red devil]

farlane schreef op zondag 13 maart 2022 @ 13:52:
Lijkt zowel op X als Y as een of-by-one in te zitten.

Dank, ik zat even te kijken, maar kan zo 123 niet vinden, heb je toevallig een regel nummer?

[farlane]

Red devil schreef op zondag 13 maart 2022 @ 14:13:
[...]
Dank, ik zat even te kijken, maar kan zo 123 niet vinden, heb je toevallig een regel nummer?

Ehm nee, ik ben abuis.

[OverloadOfRed]

Gaat het nu om een fout in de animatie library of een fout in je eigen stukje(s) code die met de tabel te maken hebben?
Ik zou zelf beginnen met die tabel goed opzetten en daarna de animatie eroverheen gooien.

Wat is de bedoeling achter dit project? Een schoolopdracht, iets voor een klant, of wil je gewoon spelen met animatie libs? Ik heb niet het idee dat die 1500+ regels script uit de lucht komen vallen, maar zonder documentatie erbij (en oneindig chainen van functies) kunnen wij weinig zeggen wat er nu mis gaat.

[Red devil]

OverloadOfRed schreef op maandag 14 maart 2022 @ 11:11:
Gaat het nu om een fout in de animatie library of een fout in je eigen stukje(s) code die met de tabel te maken hebben?
Ik zou zelf beginnen met die tabel goed opzetten en daarna de animatie eroverheen gooien.

Wat is de bedoeling achter dit project? Een schoolopdracht, iets voor een klant, of wil je gewoon spelen met animatie libs? Ik heb niet het idee dat die 1500+ regels script uit de lucht komen vallen, maar zonder documentatie erbij (en oneindig chainen van functies) kunnen wij weinig zeggen wat er nu mis gaat.

Ik heb nu een versie van de animatie online gegooid die open-source is, maar ik wil vervolgens de de fix (als dat lukt) toepassen op mijn eigen implementatie. Zelf maak ik voor mijn eigen website al een tijdje gebruik van deze animatie, maar dan als een single HTML file. Dat werkt allemaal prima.

Dus geen schoolopdracht :-), maar meer een doorontwikkeling van een product waar ik zelf mee bezig ben. Maar ben nu aan het switchen van grotendeels backend development in Java, naar meer frontend development in Vue3.

Die 1500+ regels zijn wel grotendeels de JSON variabelen, maar het is inderdaad geen klein stukje code.