Как добавить оси к графику с помощью D3.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

var svg = d3.select("svg"); // выбираем холст
var width = +svg.attr("width");
var height = +svg.attr("height");

// создаем объекты осей
var xScale = d3.scaleLinear()
    .domain([0, 10])
    .range([0, width]);
var yScale = d3.scaleLinear()
    .domain([0, 100])
    .range([height, 0]);
var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

// задаем параметры осей
xAxis.ticks(10);
yAxis.ticks(5);

// привязываем оси к соответствующим контейнерам на холсте
svg.append("g")
    .attr("class", "x-axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
svg.append("g")
    .attr("class", "y-axis")
    .call(yAxis);

// отображаем оси на холсте
svg.selectAll(".domain")
    .attr("stroke", "gray");
svg.selectAll(".tick line")
    .attr("stroke", "gray");