Embed Size (px)
Citation preview
1. vježba – SVG oblici i njihovi atributi
Program:
<!DOCTYPE html> <html> <head> <title>svg</title>
<style type="text/css"> svg {width: 600px; height: 500px;border:1px solid #000;} #prvi {fill: gray;opacity:0.5;}
#drugi {fill:lightblue;stroke:blue;stroke-width:3px;opacity: 0.8; } circle {fill:none;stroke:darkgreen;stroke-width:5px;stroke-opacity:0.5; } ellipse {fill:yellow;stroke:orange;stroke-width:5px; fill-opacity:0.5;} line {stroke:black; stroke-width:5px;} polyline {fill:none; stroke: red; } polygon {fill:green; opacity:0.3;} text {fill: blue;font-family:Arial, Helvetica, sans-serif;font-size:12px;text-shadow: 2px 2px 5px #000;} </style> </head> <body> <svg > <rect id="prvi" x="10" y="10" width="490" height="190" /> <line x1="0" y1="200" x2="500" y2="200"/> <line x1="10" y1="10" x2="10" y2="210"/> <polyline points="10,180 70,180 100,50 150,70 170,190 330,25 400,40 "/> <rect id="drugi" x="20" y="220" rx="5" ry="5" width="20" height="20" />
<circle cx="10" cy="180" r="5"/> <circle cx="70" cy="180" r="5"/> <circle cx="100" cy="50" r="5"/> <circle cx="150" cy="70" r="5"/> <circle cx="170" cy="190" r="5"/> <circle cx="330" cy="25" r="5"/> <circle cx="400" cy="40" r="5"/> <ellipse cx="350" cy="80" rx="0" ry="0" /> <text x="50" y="240">I love sirokopojasne mrezne primjene</text> <image xlink:href="slika.jpg" x="0" y="300" height="160" width="200"/> <polygon points="40,320 140,320 150,400 50,450 "/> </svg> </body> </html>
2. vježba – manipulacija html i svg elementima preko d3js library‐a
povezivanje D3js library‐a sa dokumentom u <head> elementu HTML‐a: <script type="text/javascript" src="d3.v3.js"></script> ili <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
Osnovna struktura dokumenta:
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>d3js</title> <script type="text/javascript" src="d3.js"></script> </head> <style type="text/css"> .tekst { color: red; } .tekst2 { background-color: red; color: black; width: 200px; } </style> <body>
<p>neki tekst</p> <script type="text/javascript"> //d3 kodovi </script> </body> </html>
a. //selekcija jednog elementa p i dodavanje css klase
d3.select("p").attr("class", "tekst2");
b. dodati drugi paragraph iza prvog
<p>neki drugi tekst </p>
isti kod pokrenuti u browseru – selektiran je samo prvi <p>
‐ako želimo seletirati sve iste elemente koristimo .selectAll()
d3.selectAll("p").attr("class","tekst");
c. ako imamo više istih elemenata a želimo selektirati neki koji nije prvi možemo napraviti selekciju preko id atributa
<p id="t1">neki drugi tekst</p>
d3.select("#t1").attr("class","tekst");
d. ako u css‐u nije definiran stil može se dodati direktno na element
d3.select("#t1") .style("color","purple") .style("border", "1px solid #F00") .style("width","200px");
e. dodavanje nepostojećih elemenata:
d3.select("body") .append("div") .attr("class", "tekst") .text("tekst u div-u");
f. ugnježđivanje elemenata:
d3.select("body") .append("div") .append("p").text("bok");
g. dodavanje više elemenata u element roditelj preko polja podataka:
var mojDiv=d3.select("body").append("div")
mojDiv.selectAll("p") .data([1, 2, 3, 4]) .enter() .append("p").text("dodao sam <p> u <div>");
h. tekst iz polja u ispis
var mojDrugiDiv=d3.select("body").append("div");
mojDrugiDiv.selectAll("p").data(["p1","p2","p3","p4"]) .enter() .append("p") .attr("class", "tekst") .text(function(d){return d;});
ZADATAK
uređena lista <ol> sa 5 <li> u kojima se ispisuju podaci iz liste
d3.select("body").append("ol").selectAll("li").data(["voda", "caj", "mlijeko", "sok"]).enter().append("li").text(function (d) {return d;});
i. Dodavanje SVG elemenata:
var svg= d3.select("body").append("svg") .attr("width", 500) .attr("height", 200); var kvadrat=svg.append("rect") .attr("x", 100) .attr("y", 100) .attr("width", 50) .attr("height", 60) .style("fill", "green"); var polje = [10, 20, 30 , 40, 50]; var krugovi = svg.selectAll("circle") .data(polje) .enter() .append("circle")
.attr("cx", function (d){var cx = d*3; return cx;}) .attr("cy", 100) .attr("r", function () {var r = Math.random()*30; return r;})
3. vježba
1) Generiranje elemenata: dodavanje novog paragrafa <p> sa pripadajućim tekstom:
d3.select("body") //vraća selekciju elementa <body> .append("p") //kreiranje novog elementa u trenutnoj selekciji
.text("neki tekst") //umetanje stringa u trenutnu selekciju paragrafa
Dodavanje atributa (npr. css klase):
.attr("class", "mojTekst")//dodavanje bilo kojeg atributa trenutnoj selekciji
Rezultat u browseru:
2) Povezivanje s podacima iz polja
var lista = ["kava", "caj", "voda", "sok"] //polje sa podacima d3.select("body").selectAll("p") //selektira sve <p> elemente u DOM-u
.data(lista) //povezivanje elemenata sa listom podataka .enter() //kreira mjesto za nove elemente prema broju podataka u listi .append("p") //dodaje onoliko <p> elemenata koliko je podataka u polju
.text(function (d){return d;}) //d je varijabla koja se referencira na podatke iz polja
Korištenje varijable d u rečenici function (d) {return “moje omiljeno piće je ”+d;}
Korištenje varijable d u promjeni stila
.style ("color", function (d) { if(d == "voda") {return "blue"} })
style() stvara inline css atribut: <p style=”color:blue;”>moje omiljeno piće je voda</a>
rezultat:
Zadatak:
1. Pomoću d3js kreirati neuređenu listu koja će povlačiti podatke iz polja sa brojevima 1 – 5. Svaki broj će umetnuti u poseban list item <li> sa pripadajućom rečenicom. U CSS‐u kreirati dvije klase. Svakom list item‐u će se dodijeliti atribut (.attr() metodom) “class” sa jednom od dvije stvorene klase u ovisnosti o vrijednosti u polju (brojevima od 4 nadalje će biti pridružena jedna klasa, a manjima od 4 druga klasa).
Rješenje:
var polje = [1, 2, 3 , 4, 5]; d3.select("body").append("ul").selectAll("li") .data(polje) .enter() .append("li") .text(function(d){return "na ispitu ocekujem ocjenu: " + d;}) .attr ("class", function (d) { if (d >= 4) {return "tekst2"} else {return "tekst"} } );
2. Kreirati <div> elemente koji su povezani sa poljem brojeva od 1 – 5. U svakom div‐u se ispisuje vrijednost broja iz polja. Svim div‐ovima se dodijeljuje atribut “class” koji im određuje pozadinsku boju, boju teksta, širinu, margine, poravnanje teksta. Style() metodom mijenja se širina elementa. Širina se računa kao d * 100.
Rješenje:
var polje = [1, 2, 3 , 4, 5]; d3.select("body").selectAll("div") .data(polje) .enter() .append("div") .text(function (d,i) {return i;}) //return d – ispisuje vrijednost elementa polja, a return i – ispisuje redni broj elementa u polju .attr("class", "tekst3") .style("width", function (d) {var w=d*100; return w+"px"})
3. Generiranje SVG elemenata
var svg = d3.select("body").append("svg") .attr("width", 500) .attr("height", 200) var krugovi = svg.selectAll("circle") .data(polje) .enter() .append("circle") .attr("cx", function (d,i){var cx = i*50+20; return cx;}) .attr("cy", 100) .attr("r", function (d) {var r = d*5; return r;}) Varijabla i označava index (redni broj) pojedinog elementa u DOM strukturi
4. vježba ‐ rad sa različitim vrstama podataka i kreiranje grafa
1. Sa slog.grf.unizg.hr skinuti dokument 00primjer.html koji sadrži jedan svg element unutar kojeg se iscrtavaju pravokutnici povezani sa poljem numeričkih vrijednosti: var polje = [32, 21, 12, 6, 7, 8, 23, 40]; ‐ iscrtava se onoliko pravokutnika koliko ima članova polja (8)
pravokutnicima su pridruženi sljedeći atributi: CSS klasa : .attr("class", "plavi") X pozicija: .attr("x", function (d,i){var x = i*(sirina/polje.length); return x;}) – pozicija x je definirana funkcijom sa argumentima d i i. ‐ Varijabla d predstavlja vrijednost članova u polju (32, 21, 12 …), ‐ Varijabla i predstavlja redni broj članova u istom polju (0, 1, 2, …) X pozicija je izračunata tako da se pravokutnici pravilno raspodijeljuju prema širini svg‐a. Pokušajte smanjiti ili povećati broj članova polja.
formula x = i * sirina/polje.length za prvi pravokutnik iznosi: 0*500/8 = 0 za drugi: 1*500/8 = 62.5 za treći: 2*500/8 = 125 …
Atribut za Y poziciju .attr("y", 0) je uvijek na 0 (gornji rub svg‐a)
Širina: .attr("width", function (){var duz= sirina/polje.length‐10; return duz;}) koristi sličnu formulu kao i za X poziciju, umanjenu za 10 da bi se stvorio razmak između pravokutnika.
Visina: .attr("height", function (d) {return d*10;}); ‐ povlači direktno vrijednosti iz polja definirane d varijablom u pomnožene sa 10 da se poveća raspon.
Zadatak:
Dodati svg element za ispis teksta koji će ispisivati vrijednosti polja na donjim pozicijama pravokutnika. Slika lijevo prikazuje rezultat u browseru sa pripadajućim elementima (slika desno) koji su se automatski generirali iz javascript koda. Do ovog ispisa možemo doći desnim klikom na svg u
browseru – Inspect Element
Element <text> se dodaje na isti način kao i ostali svg elementi:
svg.selectAll("text").data(polje).enter().append("text")
Dodaju mu se atributi zaCSS klasu, X i Y poziciju i ispis teksta : .attr("class", "bijeli") .attr("x", function (d, i){ var x = i*(sirina/polje.length)+10; return x;}) .attr("y", function (d) {return d*10-10;}) .text(function (d){return d;})
Pozicije X i Y se izračunavaju formulama koje su u funkciji sa argumentima d i i.
2. Otvoriti primjer 01primjer.html Kreirano je polje koordinate koje sadrži nekoliko drugih polja:
var koordinate = [ [30,50], [120, 40], [310, 200] ];
S obzirom da polje koordinate ima tri člana (polja) – kreiraju se tri elementa <text> sa ispisom vrijednosti varijable d: 1. 30, 50 2. 120, 40 3. 310, 200
Da bi pristupili svakoj pojedinačnoj vrijednosti unutarnjih polja definiramo varijablu d[0] koja će vratiti prvu vrijednost svakog pojedinačnog polja (dakle, 30 – 120 – 310 ) i varijablu d[1] koja vraća drugu vrijednost svakog pojedinačnog polja (50 – 40 – 200 ). Ova mogućnost je iskorištena kod određivanja pozicija teksta gdje je X pozicija definirana d[0] varijablom, a Y pozicija sa d[1].
Zadatak: Kreirati svg krugove čija će središta biti određena d[0] i d[1] koordinatama: var krugovi = svg.selectAll("circle").data(koordinate) .enter().append("circle") .attr("cx", function (d){ return d[0];}) .attr("cy", function (d){return d[1] ;}) .attr("r", 20) .style ("fill", function (d) { if (d[0] ==30){return "green"} if (d[0]==120) {return "purple"} if (d[0]==310) {return "red"} })
5. vježba ‐ rad sa različitim vrstama podataka i kreiranje grafa
Sa slog grf.unizg.hr skinuti prvi primjer zadatka (00primjer_tekst.html).
Dokument sadrži polje od tri stringa (tekstualnih podataka) polje = [ "data", "driven", "documents"]
Ti stringovi se, preko varijable d, ispisuju u SVG <text> elementu.
Svaki string sastavljen je od određenog skupa pod‐članova (slova) kojima možemo pristupiti pojedinačno tako da eksplicitno definiramo redni broj pod‐člana kojem želimo pristupiti:
function(d) {return d[0];}
će u ispisu teksta vratiti samo prvi pod‐član stringa, tj. prvo slovo riječi. Istim slijedom – d[1] će vratiti samo drugo slovo, d[2] treće slovo itd. Dakle izrazom d[i] definiramo vraćanje samo određenog pod‐člana jednog izraza.
Zadatak: Kreiramo polje „gradovi“ koje sadrži tri polja sa tri pod‐člana. Prvi pod‐član je ime grada, drugi broj stanovnika, treći nadmorska visina:
var gradovi = [ ["zagreb",800000,100], ["rijeka", 200000, 10], ["gospić", 13000, 560] ];
U dokumentu treba ispisati tekst sa pod‐članovima polja „gradovi“ na sljedeći način:
Rješenje: var tekst = svg1.selectAll("plavi") //alternativa - mozemo pozvati i selectAll("text") .data(gradovi) //podaci se povezuju sa poljem “gradovi” .enter() .append("text") //kreira se <text> element .attr("class", "plavi") //dodaje mu se CSS klasa .plavi .attr("x", 20) //x pozicija teksta 20 od lijevog ruba svg-a .attr("y", function (d,i){return i*50+50;}) //y pozicija za prvi član (i=0) pozicija y=50, za drugi član (i=1) y=1*50+50=100, treći član (i=2) y=2*50+50=150 .text( function(d){ return d[0]+", nadmorska visina: "+d[2]+", stanovništvo: "+d[1];}); //ispis svakog člana polja
Kreiranje grafa iz istih podataka:
1. faza – kreiranje koordinatnog sustava:
SVG prostor ima širinu – 800 i visinu 500. Numerički podaci u polju su veći zato se definira domena i raspoloživi raspon unutar kojeg želimo prikazati podatke. Domena su numeričke vrijednosti u polju a raspon je veličina svg prostora.
Funkcijom d3.max() odredit ćemo najveće vrijednosti za x i y koje se nalaze u danom polju:
var xMax = d3.max(polje, function(d){return d[1]}); ‐ traži najveću vrijednost za drugi pod‐član svakog polja (800 000) var yMax = d3.max(polje, function(d){return d[2]}); ‐ traži najveću vrijednost za treći pod‐član svakog polja (560)
Definiranje domene i raspona prema xMax i yMax:
var xPrilagodi = d3.scale.linear() .domain ([0, xMax]) //domena x je 0 – 800 000 .range ([50, sirina-100]); //raspon x je 50 – 700 na istom principu definirati domenu za Y koordinate (domena: 0 , yMax ; raspon: visina ‐50 , 50)
Koordinatni sustav: var xOs= d3.svg.axis() //funkcija .axis() kreira automatski linije, crtice i tekst za x ili y os .scale(xPrilagodi) .orient("bottom") //definira orijentaciju osi i teksta (za x – „top“ ili „bottom“, za y – „left“ ili „right“) .ticks(10); //podjela osi na manje segmente Pozivanje:
svg2.append("g") .call(xOs) .attr("class", "axis") //CSS stilizacija osi klasom .axis .attr("transform", "translate(0,"+(visina - 50)+")"); Definirati i pozvati Y os!
2. faza – kreiranje krugova
‐ Kreirati krugove koji su povezani s poljem „gradovi“ ‐ atribut „cx“ vuče parametar koji predstavlja stanovništvo – d[1]. Potrebno ga je smanjiti na raspon svg‐a sa xPrilagodi funkcijom: .attr("cx", function(d){ return xPrilagodi(d[1]);})
‐ atribut „cy“ vuče podatke iz parametra nadmorske visine. Prilagođava se y rasponu. ‐ atribut radijus „r“ koristi podatke stanovništva, ali podijeljene sa 10000 ( return d[1]/10000; )
3. faza – tekst
‐ Kreirati svg tekst koji ispisuje prvi pod‐član polja (ime grada) na prilagođenim pozicijama domene i raspona: atribut „x“ – drugi pod‐član (stanovništvo), „y“ – treće pod‐član (nadmorska visina)
Testiranje grafa:
U polje dodati nekoliko novih članova npr: [„neki drugi grad“, 400000, 300] , [„grad210“, 1000000, 1000] Graf mora automatski iscrtavati nove članove sa prilagođenim koordinatnim sustavom.
Cijeli kod: var sirina = 800; var visina = 500;
var xMax = d3.max(polje, function(d){return d[1]}); var yMax = d3.max(polje, function(d){return d[2]}); var xPrilagodi = d3.scale.linear().domain ([0, xMax]).range ([50, sirina‐100]); var yPrilagodi = d3.scale.linear().domain ([0, yMax]).range ([visina‐50,50]); var xOs= d3.svg.axis().scale(xPrilagodi).orient("bottom").ticks(10); var yOs= d3.svg.axis().scale(yPrilagodi).orient("left").ticks(10); var svg=d3.select("body").append("svg").attr("width", sirina) .attr("height", visina); svg.append("g").call(xOs).attr("class", "axis") .attr("transform", "translate(0,"+ (visina ‐ 50)+")"); svg.append("g").call(yOs).attr("class", "axis") .attr("transform", "translate(50,0)") var graf = svg.selectAll("circle") .data(gradovi).enter() .append("circle") .attr("cx", function(d){ return xPrilagodi(d[1]);}) .attr("cy", function(d){ return yPrilagodi(d[2]);}) .attr("r", function(d){ return d[1]/10000}) .style("fill", "gray"); var tekst = svg.selectAll("te") .data(gradovi).enter() .append("text") .attr("class", "te") .text (function (d){return d[0]}) .attr("x", function(d) { return xPrilagodi(d[1]);}) .attr("y", function(d) { return yPrilagodi(d[2]);})
Vježba 6. Animacije i tranzicije
slog.grf.unizg.hr –vježba 6. ‐ 00primjer.html var w = 500;var h = 600;//definiranje svg prostora sirine w i visine h var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
//krug sa tranzicijom unutar samog sebe var sx1 = w / 2; //sx1 i sy1 srediste kruga ‐ sredina svg prostora var sy1 = h / 2; var test = svg.append("circle").attr("id", "test") .attr("cx", 50) //pocetne vrijednosti sredista i radijusa kruga .attr("cy", 50) .attr("r", 30) .transition() //zapocinje tranziciju iz pocetnih vrijednosti atributa u nove vrijednosti .duration(2000) //trajanje tranzicije .delay(1000) //odgoda tranzicije za 1000ms = 1sek .attr("cx", sx1) //atributi koji se animiraju .attr("cy", sy1) .attr("r", 60) .transition() //nova tranzicija koja se pokrece tek nakon zavrsetka prve .style("fill", "yellow"); //primjer 1. ‐ tranzicija jednog oblika pod utjecajem korisnicke akcije – //click, mouseover, mouseout var k1 = svg.append("rect") .attr("x", 0) .attr("y", h ‐ 50) .attr("width", 50) .attr("height", 50); var krug = svg.append("circle") .attr("cx", 10) .attr("cy", 10) .attr("r", 0); //k1.on("click", ...)
1. Dokument sadrži primjer automatske animacije SVG elementa <circle> preko metode .transition() Animirati se mogu atributi i stilovi. Jedan element može imati definiranu jednu tranziciju u kojoj se svi navedeni atributi animiraju odjednom ili više tranzicija, kada određujemo redoslijed animiranja pojedinih atributa ili stilova. Primjer „test“ – u prvoj tranziciji se animiraju cx, cy i r atributi, a u drugoj tranziciji stil: prelazak u žutu. Trajanje tranzicije se određuje metodom .duration() a odgoda početka tranzicije se definira metodom .delay() . Vremenski period trajanja i odgode se mjeri u milisekundama (1000ms=1s).
2. U svg prostor dodati:
‐ <rect> „k1“ sa pozicijom: x=0, y= h‐50, width=50, height= 50 ‐ <circle> „krug“ sa cx= 10, cy=10, r=0
Korisničkom akcijom – na klik „k1“ – animira se „krug“
k1.on("click", function(){ krug.transition()…………} )
„krug“ će u ovoj tranziciji ( u trajanju 2sek sa odgodom od 1s) promijeniti vrijednosti atributa u sljedeće: cx=w/2, cy=h/2‐100 i r=20.
U istoj funkciji moguće je dodati nove SVG elemente koji se animiraju: svg.append(„circle“) sa pozicijom u centru svg prostora i radijusom 0, sa tranzicijom radijusa do 100.
Metoda .on() odgovara na različite korisničke akcije kao što su click, mouseover i mouseout.
k1.on("mouseover", function(){ k1.transition()…………} ) k1.on("mouseout", function(){ k1.transition()…………} )
Animirati kvadrat „k1“ tako da na prijelaz miša preko njega započinje tranzicija stila ispune boje, a na izlazak miša se boja vraća na početnu.
3. Akcija na vanjskom HTML elementu – inicira animaciju SVG elementa:
Na klik <input> elementa u HTML‐u sa id atributom „gumb“ pokreće se tranzicija stila elementa „krug“ – iz crne prelazi u ljubičastu. U tom slučaju potrebno je selektirati element „gumb“ te na njemu primijeniti metodu .on()
d3.select("gumb").on("click", function(){ krug.transition()…………} )
4. Dodavanje i uklanjanje SVG elemenata na kraju tranzicija:
Dodati u svg prostor novi kvadrat „k2“ na poziciji x=100, y= h‐50, width=50, height=50, rx=0, ry=0. Na klik kvadrata k2 započet će nekoliko tranzicija: 1. tranzicija u trajanju 500ms mijenja atribut y = h‐100, height=100, i stil ‐ fill u magenta. 2. tranzicija u trajanju 3000ms mijenja atribute width=100, rx=50 i ry= 50. Iniciranje akcija na kraju tranzicija se definira metodom .each ("end", function(){svg.append("circle")……………….remove();})
Zadatak: na kraju tranzicija „k2“ elementa dodaje se <circle> na poziciji cx=150, cy=h‐100, r=0, stroke=red, te se animira u trajanju od 2s r=50, stroke=green. Kada se izvrši tranzicija krug se .remove() metodom uklanja iz svg prostora.
5. Zadatak: Dodaje se novi kvadrat „k3“ na poziciji x=200, y=h‐50, width=50, height=50, gdje se na klik mijenjaju njegovi atributi: 1. tranzicija – mijenja poziciju x=0, y=0, width=w, height=h 2. tranzicija u trajanju od 3s sa odgodom 1 sekunde mijenja style – fill u zelenu, te se uklanja iz svg prostora.
6. Tranzicije elemenata povezanih sa poljem
Stvoriti novi dokument sa svg prostorom istih dimenzija kao i prethodni. U njemu definirati polje sa 11 elemenata npr. polje=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]. Kreirati onoliko krugova koliko je elemenata u polju metodom ….data(polje).enter()…. Pozicija krugova cx=50, r=30, cy= function(d, i) { return i/polje.length*h+30;} kako bi se krugovi pravilno rasporedili po vertikali.
Kreirati kvadrat „k1“ u gornjem lijevom kutu dimenzija 50x50. Na klik kvadrata pokreće se funkcija koja animira krugove u trajanju od 2s na poziciju cx=450: k1.on("click", function(){krugovi.transition()………})
Odgodu pomaka svakog pojedinačnog kruga postižemo pomoću .delay() metode koja je povezana sa rednim brojem elementa u polju (interna varijabla i). .delay(function(d, i){return i/polje.length*2000})
Na klik html <input> gumba „pokreni“ mijenja se ispuna krugova iz crvene u ljubičastu (purple) u trajanju 2sek sa odgodom za svaki pojedinačni krug.
Rješenje, nastavak na 00primjer.html: k1.on("mouseover", function() {k1.transition().style("fill", "red")}) k1.on("mouseout", function() {k1.transition().style("fill", "black")})
var sx2=w/2; var sy2 =h/2‐100; //tranzicija jednog oblika na klik drugog oblika ‐ krug se animira na klik kvadrata k1 k1.on("click", function() {//dodavanje novog elementa i animiranje postojeceg krug.transition().delay(1000).duration(2000) .attr("r", 20) .attr("cx", sx2) .attr("cy", sy2); svg.append("circle") .attr("id", "putokosunca") .attr("cx", sx1) .attr("cy", sy1) .attr("r", 0) .transition().attr("r", 100);}) //vanjski html utjece na animaciju ‐ klik gumba, promjena boje kruga d3.select("#gumb").on("click", function() { krug.transition().style("fill", "purple") }) var k2 = svg.append("rect").attr("x", 100).attr("y", h ‐ 50).attr("rx", 0).attr("ry", 0) .attr("width", 50).attr("height", 50); k2.on("click", function() {k2.transition().duration(500) .attr("y", h ‐ 100) .attr("height", 100) .style("fill", "rgb(255, 0, 255)") .transition().duration(3000) .attr("width", 100) .attr("rx", 50) .attr("ry", 50) .each("end", function() { svg.append("circle").attr("id", "krug") .attr("cx", 150) .attr("cy", h ‐ 100) .attr("r", 0) .style("fill", "none") .style("stroke", "red") .transition().duration(2000) .attr("r", 50).style("stroke", "green").remove();
}) }) var k3 = svg.append("rect") .attr("x", 200) .attr("y", h ‐ 50) .attr("width", 50) .attr("height", 50); k3.on("click", function() { k3.transition() .attr("x", 0) .attr("y", 0) .attr("width", w) .attr("height", h) .transition().delay(1000).duration(3000) .style("fill", "green") .remove(); })
