D3.js

Проф. др Игор Дејановић (igord at uns ac rs)

Креирано 2024-09-30 Mon 14:27, притисни ESC за мапу, "м" за мени, Ctrl+Shift+F за претрагу

Садржај

1. Увод у D3

1.1. Шта је D3?

  • JavaScript библиотека за манипулацију документом (DOM) на бази података.
  • Базирана ан веб стандардима: HTML, CSS, SVG, Canvas.
  • Не уводи нове концепте већ користи искључиво стандардне.
    • Уколико дође до увођења нових функционалности у веб прегледачима није потребно мењати библиотеку.
    • Знање које се стекне употребом D3 библиотеке је "преносиво".
    • Лако дебаговање - може се користи уграђени дебагер.
  • Примена у визуализацији података.

1.2. Селекције

Обичан JavaScript: 

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
  var paragraph = paragraphs.item(i);
  paragraph.style.setProperty("color", "white", null);
}

D3: 

d3.selectAll("p").style("color", "white");

d3.select(...)       // Селектује први.
d3.selectAll(...)    // Селектује све.
  • Сандардни CSS селектори
d3.select("div")            // по тагу
d3.select(".classname")     // по класи
d3.select("#line")          // по идентификатору
d3.select("[color=black]")  // по атрибуту
d3.select("parent child")   // по садржавању
  • Подселекције - филтер образац
// подселекција - селекција над селекцијом
d3.select("body").selectAll("p")
d3.selectAll("p").select("b")

1.3. Атрибути и стилови

var circleDemo = d3.select("#myCircle");
circleDemo.attr("r", 40);

d3.select("body").selectAll("p").style("font-size", "12px");

1.4. Динамичке особине

d3.selectAll("p").style("background-color", function() {
  return "rgb(" + Math.random() * 255 + ", 100, 100)";
});

Први параграф

Други параграф

1.5. Повезивање података - binding

var myArray = [1, 2, 3, 4];
selection.data(myArray);
  • Елементи из myАrrаy се повезују за одговарајуће елементе селекције.

1.6. Креирање и брисање елемената

  • enter - селекција која креира нове елементе на основу нових података.
  • exit - селекција за брисање елемената при брисању података.
// Update…
var p = d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
    .text(function(d) { return d; });

// Enter…
p.enter().append("p")
    .text(function(d) { return d; });

// Exit…
p.exit().remove();

1.7. Пример

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>d3 test</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <script>
var test_data = [8, 16, 23];
d3.select("body")
  .selectAll("p")
  .data(test_data)
  .enter().append("p")
    .text(function(d) { return "I’m number " + d + "!"; })
    .style("font-size", function(d){ return d + "px"; });
    </script>
  </body>
</html>

1.8. Прелази и анимација

Постепена промена боје: 

d3.select("body").transition()
    .style("background-color", "black");

Промена величине кругова са задршком: 

d3.selectAll("circle").transition()
    .duration(750)
    .delay(function(d, i) { return i * 10; })
    .attr("r", function(d) { return Math.sqrt(d * scale); });

2. Пример: три круга

2.1. Пример: три круга

<svg width="720" height="120">
  <circle cx="40" cy="60" r="10"></circle>
  <circle cx="80" cy="60" r="10"></circle>
  <circle cx="120" cy="60" r="10"></circle>
</svg>

https://bost.ocks.org/mike/circles/

2.2. Селекција и стилизовање

var circle = d3.selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("r", 30);

2.3. Промена особина појединачног елемента

  • Анонимне функције.
d3.select('button').on("click",
  function(){
    d3.selectAll("circle")
    .attr("cx",
         function() { return Math.random() * 720; });
  }
);

2.4. Повезивање података (Data Binding)

circle.data([32, 57, 112]);
circle.attr("r", function(d) { return Math.sqrt(d); });

2.5. Додавање елемената

var svg = d3.select("svg");
svg.selectAll("circle")
    .data([32, 57, 112, 693])
  .enter().append("circle")
    .attr("cy", 60)
    .attr("cx", function(d, i) { return i * 100 + 30; })
    .attr("r", function(d) { return Math.sqrt(d); })
    .style("fill", "steelblue");

2.6. Уклањање елемента

svg.selectAll("circle").data([32, 57]).exit().remove();

2.7. Ажурирање, додавање, уклањање

svg.append("circle")
    .attr("cx", d.x)
    .attr("cy", d.y)
    .attr("r", 2.5);

svg.selectAll("circle")
  .data(data)
  .enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 2.5);
Data Enter Update Elements Exit

2.8. Транзиција елемената који се додају/уклањају

svg.selectAll("circle")
.data([60, 100, 140])
.enter().append("circle")
    .attr("cx", function(d, i) {
        return i * 100 + 30; })
    .attr("cy", 60)
    .attr("fill", "steelblue")
    .transition()
    .duration(1000)
    .attr("r", 20);

svg.selectAll("circle")
.data([60])
.exit()
    .transition()
    .duration(1000)
    .attr("r", 0).remove();

Thinking with Joins

3. Примери и туторијали