Transformasjon

Hva

Her manipulerer vi transformasjonen (translate) til hver boble. Vi transformerer fortløpende når brukeren trekker slideren.

Hver lag er representert med følgende:

<g class="bubble" transform="translate(0,0)">\
   <line x1="0" y1="0" x2="0" y2="0"\
       stroke="blue" stroke-width="0.3"/>\
    <circle cx="0" cy="0" r="15"\
            fill="white" stroke="red" stroke-width="1"/>\
    <text\
      transform="scale(1,-1)"\
      font-family="Verdana" font-size="12" x="-7"\
      fill="blue" stroke="black" stroke-width="0.2"> \
      \
   </text>\
</g>

Demo

Velg år

Runde 0

Slideren er bygger slik:

<label for="rounder">Runde</label>
<input type="range" min="0" max="30" value="0" id="rounder" step="1" 
  oninput="outputRound(value)"/>
<output for="rounder" id="roundno">0</output></p>

med denne Javascriptkoden:

// update text showing slider value
function outputRound(v) {
    document.querySelector('#roundno').value = v;
    curRoundIndex=v;
    moveBublesToIndex(curRoundIndex);
}

Kjernen i koden som drar animasjonen er slik:

function moveBublesToIndex(index){
    // just to make sure
    if(index>=curRoundCount)
        return;
    var blist=svgElt.querySelectorAll(".bubble");
    var Offset=xOffset;
    for(var i=0; i< blist.length; i++){
        var rlist=curSeason.teamList[i].roundlist;
        blist[i].setAttribute("transform",
            "translate("+Offset+","+curPointStep*rlist[index]+")");
        
        var L=blist[i].querySelector("line")
        L.setAttribute("y2",-curPointStep*rlist[index]);
        
        Offset+=xOffset;
        updatePTextInBubbles(index);
    }
}

Du kan teste og inspisere kode på en litt mer oversiktlig side:
test.html https://borres.hiof.no/wep/svg/nff/nff2/test.html