Cubecubed πŸ’– d3.js

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 ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ свои ΠΊΡƒΠ±Ρ‹.

ΠžΡ†Π΅Π½ΠΈΡ‚Π΅ ΡΡ‚Π°Ρ‚ΡŒΡŽ
devanswers.ru
Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ