JavaScript :: D3.js

Чернетка! Стаття не завершена...

Базовий шаблон

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>

<!-- Create a div for SVG shapes -->
<div id="svg-container" style="width:1500px; height:800px;"></div>

<script>
    var width = 1500;
    var height = 800;

    var svg = d3.select("#svg-container")
      .append("svg")
        .attr("xmlns",  "http://www.w3.org/2000/svg")
        .attr("xlink",  "http://www.w3.org/1999/xlink")
        .attr("viewBox", [0, 0, width, height])
        .attr("width",  width)
        .attr("height",  height)
        .call(d3.zoom().on("zoom", function () {
            svg.attr("transform", d3.zoomTransform(this))
        }))
        .append("g") 
    /*
        ....
    */
</script>

Додавання об’єктів

Власні атрибути

svg
  .append("circle")
    .attr("id", "shape_id")
    .attr("cx", 100)
    .attr("cy", 200)
    .attr("r", 5)
    .style("fill", "#68b2a1")
    // встановити значення
    .attr("from", 150)
    .attr("to", "person")

// отримати значення (ідентифікація по "id")
var p = d3.select("#shape_id").attr("to");

// отримати значення (ітерація по всім доступним "circle")
d3.selectAll("circle")
    .each(function(d) {
        if ( d3.select(this).attr("from") === 150 ){
            // ...
            }
        }

Встановити CSS-класи

svg
  .append("circle")
    .attr("id", "shape_id")
    .attr("cx", 100)
    .attr("cy", 200)
    .attr("r", 5)
    // встановити клас
    .classed("base-class circle-class", true)

// видалити клас
d3.select("#shape_id").classed("circle-class", false)
// видалити всі класи
d3.select("#shape_id").attr("class", null)

Встановити події

svg
    .append("line")
    .attr("x1", 0)
    .attr("y1", 0)
    .attr("x2", 100)
    .attr("y2", 100)
    .attr("stroke", "red")
    .on("mouseover", function(){  
        d3.select(this).attr("stroke", "blue")
    })    
    .on("mouseout", function(){nodeMouseOut()});

function nodeMouseOut(){
    // ....
};

Додати текст

// простий текст
svg
    .append("text")
    .attr("x", 100)
    .attr("y", 200)
    .style("fill", "black")
    .style("font-size", "20px")
    .attr("text-anchor", "middle")
    .text("TEXT");

// текст з посиланням 
// в svg необхідний attr("xlink",  "http://www.w3.org/1999/xlink")
svg
    .append("text")
    .attr("x", 100)
    .attr("y", 200y)
    .attr("text-anchor", "middle")
    .classed('link-class', true)
    .append("a")
        .attr("href", "https://site.com")
        .html("TEXT")

Отримати габарити

var bb = d3.select("#shape-id").node().getBBox()

console.log(bb, bb.x, bb.y, bb.width, bb.height)

Градієнт

var rg = svg.append("defs")
    // gradient direction
        .append("linearGradient")
        .attr("id", "my_gradient")
        .attr("x1", "0%").attr("y1", "0%")
        .attr("x2", "100%").attr("y2", "0%");
    // gradient color    
    rg.append("stop").attr("offset", "0%"  ).attr("stop-color", "#5294e2").attr("stop-opacity", 1);
    rg.append("stop").attr("offset", "20%" ).attr("stop-color", "#5294e2").attr("stop-opacity", 0.5);
    rg.append("stop").attr("offset", "100%").attr("stop-color", "#5294e2").attr("stop-opacity", 0);

svg.append("rect")
    .attr("x", 100)
    .attr("y", 200)
    .attr("width", 50)
    .attr("height", 15)
    .attr("fill", "url(my_gradient)");

Видалення об’єктів

// видалити всі об'єкти з svg
svg.selectAll("*").remove()

Посилання

Examples:

Tutorials: