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

by Kate Mokhova

CSS

.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

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)

var radius = 3
var xScale = d3.scale.linear()
    .domain([0, 5]) // элементы массива имеют индекс от 0 до 5
    .range([radius, 100])
var yScale = d3.scale.linear()
    .domain([0, 20]) // диапазон значений
    .range([50, radius])

map
    .enter()
    .append('circle')
    .attr('cx', function (item, index) { return xScale(index) })
    .attr('cy', function (item, index) { return yScale(item) })
    .attr('fill', function (item, index) { return item > 5 ? 'red' : 'black' })
    .attr('r', 0)
    .transition()
    .attr('r', radius)

var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom")
                .ticks(6)

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (50) + ")")
    .call(xAxis)