d3.js — ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠ°Ρ Π΄Π»Ρ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°Π½ΠΈΡ DOM Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ Π΅Π΅ ΠΊΠ°ΠΊ Π²Π΅ΡΡΠΈΡ jQuery Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠΊΠΎΠ»Π΅Π½ΠΈΡ, Π½ΠΎ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ. d3.js ΡΠΎΠΊΡΡΠΈΡΡΠ΅ΡΡΡ Π½Π° Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ
. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΎΠ½ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ, Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΠΌΠΎΠΉ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ tweening (Π° Π½Π΅ WebAPI’s requestAnimationFrame
).
Cubecubed ΠΈΠ½ΡΠ΅Π½ΡΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ d3 Π²ΠΎ Π²ΡΠ΅Ρ ΠΊΠ»Π°ΡΡΠ°Ρ ΠΊΡΠ±ΠΈΠΊΠΎΠ½ΠΎΠ², ΡΠ²ΡΠ·Π°Π½Π½ΡΡ Ρ SVG. Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΠΏΠΎΠΊΠ°ΠΆΡ Π²Π°ΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π²Π΅ΡΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°ΡΡ ΠΎ d3, ΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ ΠΎΠ±ΡΡΡΠ½Ρ, ΠΊΠ°ΠΊ Cubecubed ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π΅Π³ΠΎ Π΄Π»Ρ Π°Π±ΡΡΡΠ°Π³ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΎΡΠ΅ΡΡΠ° ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° SVG Π² ΠΊΠ»Π°ΡΡΠ°Ρ .
ΠΡΠ°ΠΊ, Π΄Π°Π²Π°ΠΉΡΠ΅ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² d3.
append()
, select()
, attr()
ΠΈ style()
.
Π index.html
ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΡΠΈ ΡΠ΅Π³ΠΈ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <body>
:
<h1>Hello</h1>
<h1>World</h1>
ΠΡΡΡ ΠΈ Π΄ΡΡΠ³ΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π½Π° JavaScript. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ HTML-ΡΠ°ΠΉΠ».
d3.select("body")
.append("h1")
.text("Hello");
d3.select("body")
.append("h1")
.text("World");
ΠΠΎΠ³Π΄Π° ΠΌΡ Π²ΡΠ·ΡΠ²Π°Π΅ΠΌ ΠΌΠ΅ΡΠΎΠ΄ select("body")
, d3 Π½Π°ΠΉΠ΄Π΅Ρ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ body ΠΈ Π²Π΅ΡΠ½Π΅Ρ Π΅Π³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡ d3 selection.
ΠΠ°Π»Π΅Π΅ ΠΌΡ Π²ΡΠ΄Π΅Π»ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ²ΡΠΉ <h1>
ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
d3.select('h1');
ΠΠ°ΡΠ΅ΠΌ, Π΅ΡΠ»ΠΈ ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ Π°ΡΡΠΈΠ±ΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΠΊΠΎΠ΄ Π²ΡΡΠ΅ Ρ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ attr()
.
d3.select('h1')
.attr('class', 'hello');
ΠΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ HTML Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
<h1 class="hello">Hello</h1>
<h1>World</h1>
ΠΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»ΠΈ CSS ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ? ΠΡ Π΄ΠΎΠ³Π°Π΄Π°Π»ΠΈΡΡ.
d3.select('h1')
.attr('class', 'hello')
.style('color', 'red');
ΠΠ°Π³ΠΈΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΡ ΡΡΡΡΠΊΡΡΡΡ HTML:
<h1>red</h1>
<h1>green</h1>
<h1>blue</h1>
ΠΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ²Π΅Ρ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² h1? ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ — Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡΡ, select()
ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ° ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΈΠ· Π½ΠΈΡ
. Π§ΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ ΡΡΠΎΠ³ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ:
<h1 class="red">red</h1>
<h1 class="green">green</h1>
<h1 class="blue">blue</h1>
d3.select(".red")
.style("color", "red");
d3.select(".green")
.style("color", "green");
d3.select(".blue")
.style("color", "blue");
ΠΠ°ΠΊΠΎΠ²Ρ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄Π°? ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΡΡΠ΅Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² h1, Π° Π·Π°ΡΠ΅ΠΌ Π½Π°ΡΡΡΠΈΡΡ ΠΏΡΠΈΠ½ΡΠΈΠΏ DRY, ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΠ°Π² ΠΊΠ»Π°ΡΡΡ ΠΏΡΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ²Π΅ΡΠΎΠ². ΠΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅ ΡΠ΅Π±Π΅ Π±ΠΎΠ»ΡΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, Π³Π΄Π΅ Ρ Π½Π°Ρ ΡΠΎΡΠ½ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π΅ Π·Π½Π°Ρ, ΠΊΠ°ΠΊ Π²Ρ, Π½ΠΎ Ρ Π½Π΅ Π±ΡΠ΄Ρ ΡΡΡΡΠΆΠ΄Π°ΡΡ ΡΠ΅Π±Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ ΡΠΎΡΠ΅Π½ ΠΊΠ»Π°ΡΡΠΎΠ², Π° Π·Π°ΡΠ΅ΠΌ ΠΏΠΈΡΠ°ΡΡ ΡΠΎΡΠ½ΠΈ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² select()
.
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°Ρ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΌΠΎΠ΅Π³ΠΎ, Π½ΠΎ Π² d3 Π²ΡΡΡΠΎΠ΅Π½ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠΉ ΠΌΠ΅ΡΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² ΡΡΠΎΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ. ΠΡΠΎ ΠΌΠ΅ΡΠΎΠ΄ data()
.
Π‘Π½Π°ΡΠ°Π»Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠΌ ΠΌΠ°ΡΡΠΈΠ² ΡΠ²Π΅ΡΠΎΠ²ΡΡ ΡΡΡΠΎΠΊ.
const colors = ["red", "green", "blue"];
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΌΡ Π±ΠΈΠ±ΠΈΠ΄ΠΈΠΌ-Π±ΠΈΠ±ΠΈΠ΄ΠΈΠΌ-Π±ΠΈΠ±ΠΈΠ΄ΠΈΠΌ-Π±ΠΈΠ±ΠΈΠ±ΠΈΠ΄ΠΈΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΡ ΡΡΡΠΎΠΊ ΠΊΠΎΠ΄Π°.
d3.selectAll("h1")
.data(colors)
.style((d, i) => d);
Π Π±ΡΠΌ, Π²ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ!
Π§ΡΠΎ Π·Π΄Π΅ΡΡ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ? ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ
, ΠΌΡ Π²ΡΠ΄Π΅Π»ΡΠ΅ΠΌ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ h1, Π·Π°ΡΠ΅ΠΌ Π²ΡΠ·ΡΠ²Π°Π΅ΠΌ Π΄Π»Ρ Π½ΠΈΡ
ΠΌΠ΅ΡΠΎΠ΄ data()
. Π‘ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ° ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π² ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΠ΅ΠΏΠΎΡΠΊΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π°Π½ΠΎΠ½ΠΈΠΌΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΡ Ρ d
ΠΈ i
Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ². ΠΡΠΈ Π΄Π²Π° ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠΈΠ΅ ΠΆΠ΅, ΠΊΠ°ΠΊ Π² ΠΌΠ΅ΡΠΎΠ΄Π΅ JavaScript map()
: d
— ΡΡΠΎ ΡΠ΅ΠΊΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π° i
— Π΅Π³ΠΎ ΠΈΠ½Π΄Π΅ΠΊΡ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅.
ΠΡΠ΅Π³ΠΎ ΡΡΠΈ ΡΡΡΠΎΠΊΠΈ ΠΊΠΎΠ΄Π°, ΠΈ Π½Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΊΠ»Π°ΡΡΡ ΠΈΠ»ΠΈ Π²ΡΠ·ΡΠ²Π°ΡΡ ΠΌΠ΅ΡΠΎΠ΄ ΡΠΎΡΠ½ΠΈ ΡΠ°Π·. Π Π°Π·ΡΠΌΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΌΠ°ΡΡΠΈΠ² (Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠ°ΠΌΠΈ — ΡΡΠΎ data
Π² d3) Π½ΡΠΆΠ½ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡ Π΄ΠΎ ΡΡΠ° ΡΠ°Π·, ΡΡΠΎ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ
ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ Π΄Π°Π½Π½ΡΡ
.
Π’Π°ΠΊΠΎΠ²Π° ΠΏΡΠΈΡΠΎΠ΄Π° ΡΠ΅ΡΠΌΠΈΠ½Π° «Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Π΄Π°Π½Π½ΡΡ
» Π² d3. ΠΡΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠ΅ Π²ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° Π΄Π°Π½Π½ΡΡ
Π² ΠΌΠ΅ΡΠΎΠ΄ data()
ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π΄Π°ΠΆΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² SVG, ΡΡΠΎΠ±Ρ Π»Π΅Π³ΠΊΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π΄Π°Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈΠ»ΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ.
transition()
kickstart
Π‘Π»Π΅Π΄ΡΡΡΠ°Ρ Π²Π΅ΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅Π»Π°Π΅Ρ d3 Π·Π²Π΅ΡΠ΅ΠΌ, — ΡΡΠΎ Π΅Π³ΠΎ ΠΌΠ΅ΡΠΎΠ΄ transition()
. Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Π΅Π³ΠΎ Π²ΠΎ Π²ΡΠ΅Ρ
ΡΠΈΠΏΠ°Ρ
SVG-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² Cubecubed.
ΠΠΎΠ»ΡΡΠ΅ Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΡΠ°Π·Π³ΠΎΠ²ΠΎΡΠΎΠ², Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ³ΡΡΠ·ΠΈΠΌΡΡ Π² ΠΊΠΎΠ΄ ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ.
Π‘Π½Π°ΡΠ°Π»Π° ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π² ΡΠ΅Π»ΠΎ SVG ΡΠ»Π΅ΠΌΠ΅Π½Ρ <circle>
. ΠΠΎΠ·Π²ΡΠ°ΡΠ΅Π½Π½ΠΎΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ.
const circleSelection = d3.select("body")
.append("circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 50)
.attr("fill", "none")
.attr("stroke", "#ffc777");
Π§ΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅Π²Π΅ΡΡΠΈ ΠΎΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΊΡΡΠ³, ΠΌΡ Π²ΡΠ·ΡΠ²Π°Π΅ΠΌ transition()
Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ selection.
circleSelection
.transition()
.delay(1000)
.duration(2000)
.attr("transform", "translate(50, 50)");
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΊΠΎΠ΄Π΅ ΠΌΡ Π·Π°Π΄Π°Π΅ΠΌ Π²ΡΠ΅ΠΌΡ Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ (ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π΄ΠΎ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½Π° — Π² ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Π°Ρ
, ΠΏΠΎΡΡΠΎΠΌΡ 1000ms = 1s), Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. Π ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΆΠ΄Π΅Ρ 1 ΡΠ΅ΠΊΡΠ½Π΄Ρ, Π·Π°ΡΠ΅ΠΌ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ Π°ΡΡΠΈΠ±ΡΡΡ SVG transform
, ΠΏΠΎΠΊΠ° Π½Π΅ Π΄ΠΎΡΡΠΈΠ³Π½Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ translate(50, 50)
. ΠΠ»Ρ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ ΡΠ°Π±ΠΎΡΡ ΡΠ²ΠΈΠ½Π° ΡΡΠ΅Π±ΡΠ΅ΡΡΡ 2 ΡΠ΅ΠΊΡΠ½Π΄Ρ.
ΠΡΠΈΡΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΌΡ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΠΌ Π°ΡΡΠΈΠ±ΡΡ translate
, Π° Π½Π΅ cx
ΠΈ cy
, Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΠΎ Π²ΡΠ΅Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
SVG, ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Π΄Π²Π° ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΡ
ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ <circle>
. Π Cubecubed ΡΠΈΠΏΡ ΠΊΡΠ±ΠΈΠΊΠΎΠ½ΠΎΠ² ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΎΡ <circle>
Π΄ΠΎ <line>
ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. Π ΡΡΠΎΠΌΡ ΠΌΠΎΠΌΠ΅Π½ΡΡ Ρ Ρ
ΠΎΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Translate
Π΄Π»Ρ Π²ΡΠ΅Ρ
Π½ΠΈΡ
.
ΠΡΠΈΠ½ΡΠΈΠΏ Cubecubed Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½ΠΎΠ²ΡΡ ΡΠΈΠΏΠΎΠ² ΠΊΡΠ±ΠΈΠΊΠΎΠ½ΠΎΠ²
ΠΡΠ΅ ΡΠΈΠΏΡ ΠΊΡΠ±ΠΈΠΊΠΎΠ½ΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄Π½ΡΠΌΠΈ ΠΎΡ Π°Π±ΡΡΡΠ°ΠΊΡΠ½ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° Cubicon
. ΠΡΡΡ Π΄Π²Π° ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ²Π°: g_cubiconWrapper
ΠΈ def_cubiconBase
, ΠΊΠΎΡΠΎΡΡΠΌ Π² ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡΠ΅ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ d3. ΠΠ΅ΡΠ²ΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ SVG <g>
, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΎΠΊΡΡΠ³ Π²ΡΠΎΡΠΎΠ³ΠΎ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ Π»ΡΠ±ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ SVG, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅.
ΠΠ΅ΡΡ ΠΌΠ΅ΡΠΎΠ΄ append()
Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½ Π²Π½ΡΡΡΡ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡΠ°. ΠΡΠ»ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π΅Π³ΠΎ Π² ΠΌΠ΅ΡΠΎΠ΄ render()
, ΡΡΡΡΠΊΡΡΡΠ° HTML Π±ΡΠ΄Π΅Ρ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π±ΡΠ΄ΡΡ Π²ΡΠ·ΡΠ²Π°ΡΡ ΡΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄, ΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ Π±Π΅ΡΠΏΠΎΡΡΠ΄ΠΊΡ.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΡΠΎ Π²ΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ ΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ d3 ΠΈ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Cubecubed ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠ²ΠΎΠΈ ΠΊΡΠ±Ρ.