объяснение D3, пример3

by devgru

JavaScript

var svg = d3.select('body').append('svg')

var numbers = [
    5, 6, 7, 16, 0, 3
]

var circles = svg.selectAll('circle')

var map = circles.data(numbers)

map
    .enter() // стоит прочитать про enter-update-exit
    .append('circle')
    .attr('cx', function (item, index) { return index * 10 })
    .attr('cy', function (item, index) { return item * 3 })
    .attr('r', 3)
    .attr('fill', 'red')

/*
    Если бы мы хотели отразить новые данные, мы бы могли сделать так:
    
    Обновим выборку данных:
    map = circles.data(newNumbers)
    
    Обновим существующие элементы:
    map
        .update()
        .attr( ... )
    
    Добавим новые, если есть:
    map
        .enter()
        .append('circle')
        .attr( ... )
        
    Удалим элементы, которым не осталось данных:
    map
        .exit()
        .remove()
*/