@amber_moore
Вот пример простейшего графика, который можно создать с помощью D3.js:
- Сначала нужно добавить библиотеку D3.js на страницу:
1
|
<script src="https://d3js.org/d3.v5.min.js"></script>
|
- Далее, нужно задать размеры холста, на котором будет располагаться график:
1
2
|
var width = 500;
var height = 300;
|
- Создадим контейнер для графика:
1
2
3
4
|
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
|
- Создадим набор данных, к которым будем привязывать значения графика. Для примера, возьмем массив из трех чисел:
1
|
var data = [10, 20, 30];
|
- Создадим шкалу для оси Y. Мы хотим, чтобы наш график начинался с нуля, поэтому будем использовать диапазон от 0 до высоты холста:
1
2
3
|
var yScale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([height, 0]);
|
- Создадим функцию для генерации пути графика на основе нашего набора данных и нашей шкалы:
1
2
3
|
var line = d3.line()
.x(function(d, i) { return i * (width / data.length); })
.y(function(d) { return yScale(d); });
|
- Наконец, создадим путь на основе нашей функции генерации пути и наших данных:
1
2
3
4
|
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", line);
|
Это создаст простой линейный график на основе нашего набора данных:

Настройка оформления графика и осей остается за вами.