D3 code werkt niet in Vue3 omgeving - toegang tot methodes?

[Red devil]

Beste tweakerts,

Heb een tool die HTML files uitspuugt met een D3 animatie (oude D3 versie 3). Nu ben ik de boel aan het overzetten naar een Vue 3 component, dus variabelen in de data en javascript in methodes gieten. Nu heb ik een methode waar wat D3 code wordt aangeroepen met een nested (?) functie. Deze werkt prima in de HTML file, maar in Vue3 werkt het niet. Dit is het betreffende stukje code:

...

code:

  cell
    .append("path")
    .filter(function(d) { return d.z == 235 })
    .attr("d", "M20.698,32.578L21.677,38h-5.354l0.979-5.422H5l6.322-6.322H6.059l6.488-6.488H8.216l5.407-5.407h-2.888L19,6.097 l8.266,8.264h-2.889l5.407,5.407h-4.331l6.488,6.488h-5.264L33,32.578H20.698z M17.167,5.643L19,4.679l1.834,0.964l-0.352-2.041 l1.484-1.446l-2.05-0.298L19,0l-0.917,1.858l-2.049,0.298l1.483,1.446L17.167,5.643z")
    .attr("fill", "green")
    .attr("opacity", function(d) {  return  z(d.z); })
    .attr("class", "icon")
    .attr("width", x.rangeBand())
    .attr("height", x.rangeBand())
    .attr("transform", function(d) {

    console.log(this);
    console.log(this.getBBox());
    console.log(x.rangeBand());
    
      var scale = (x.rangeBand()/((this.getBBox()['height']+this.getBBox()['width'])/2)*0.9);
      var marginTop = (x.rangeBand()-(this.getBBox()['height']*scale))/2;
      var marginLeft = (x.rangeBand()-(this.getBBox()['width']*scale))/2;
      return "translate(" + (x(d.x)+marginLeft) + ", " + marginTop + ")scale("+ scale +")";
    })

console.log(this) werkt onder HTML en Vue3, daar komt onder HTML dit uit:

code:

<path d="M20.698,32.578L21.677,38h-5.354l0.979-5.422H5l6.322-6.322H6.059l6.488-6.488H8.216l5.407-5.407h-2.888L19,6.097 l8.266,8.264h-2.889l5.407,5.407h-4.331l6.488,6.488h-5.264L33,32.578H20.698z M17.167,5.643L19,4.679l1.834,0.964l-0.352-2.041 l1.484-1.446l-2.05-0.298L19,0l-0.917,1.858l-2.049,0.298l1.483,1.446L17.167,5.643z" fill="green" opacity="0.235" class="icon" width="32.26829268292683" height="32.26829268292683" transform="translate(36.081817626953125,-0.586696207523346),scale(0.8800443410873413,0.8800443410873413)"></path>

Alleen bij deze statement gaat het mis:

console.log(this.getBBox());

In de HTML krijg ik nog een Object terug van type SVGRect maar onder Vue3 krijg ik :

Uncaught TypeError: this.getBBox is not a function

Sowieso vind ik het wat lastig te begrijpen waarom je met vue3 niet toegang hebt tot de globale objecten/methodes? Kan iemand me dat uitleggen? Of zijn deze alsnog beschikbaar.

[OverloadOfRed]

Ik zie niet zo waar je die console.logjes in zet, maar ik denk dat je de 'this' scope niet helemaal goed hebt begrepen. In Vue class-based componenten is 'this' het component. In kale HTML is 'this' iets heel anders.

Je kan er voor kiezen om die functie in je Vue component te importeren, maar dat zal je dan even moeten uitzoeken. Ik weet niet zo wat D3 in moet houden. Als je de functies op de globale 'this' wil gebruiken moet je ze expliciet importeren in je app, maar ik zou aanraden om het bij het component te houden.

[Red devil]

OverloadOfRed schreef op vrijdag 11 maart 2022 @ 12:25:
Ik zie niet zo waar je die console.logjes in zet, maar ik denk dat je de 'this' scope niet helemaal goed hebt begrepen. In Vue class-based componenten is 'this' het component. In kale HTML is 'this' iets heel anders.

Je kan er voor kiezen om die functie in je Vue component te importeren, maar dat zal je dan even moeten uitzoeken. Ik weet niet zo wat D3 in moet houden. Als je de functies op de globale 'this' wil gebruiken moet je ze expliciet importeren in je app, maar ik zou aanraden om het bij het component te houden.

Dank, ja, dit is mijn eerste project in Vue en ik heb geen weinig tot geen ervaring met Javascript, alleen met Java. Ik zal eens kijken of ik de methode kan overzetten naar een global method in Vue.