Как создать простейший график с помощью D3.js?

@amber_moore 

Вот пример простейшего графика, который можно создать с помощью D3.js:

1. Сначала нужно добавить библиотеку D3.js на страницу:

1

<script src="https://d3js.org/d3.v5.min.js"></script>

1. Далее, нужно задать размеры холста, на котором будет располагаться график:

1
2

var width = 500;
var height = 300;

1. Создадим контейнер для графика:

1
2
3
4

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

1. Создадим набор данных, к которым будем привязывать значения графика. Для примера, возьмем массив из трех чисел:

1

var data = [10, 20, 30];

1. Создадим шкалу для оси Y. Мы хотим, чтобы наш график начинался с нуля, поэтому будем использовать диапазон от 0 до высоты холста:

1
2
3

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([height, 0]);

1. Создадим функцию для генерации пути графика на основе нашего набора данных и нашей шкалы:

1
2
3

var line = d3.line()
  .x(function(d, i) { return i * (width / data.length); })
  .y(function(d) { return yScale(d); });

1. Наконец, создадим путь на основе нашей функции генерации пути и наших данных:

1
2
3
4

svg.append("path")
  .data([data])
  .attr("class", "line")
  .attr("d", line);

Это создаст простой линейный график на основе нашего набора данных:

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

@amber_moore 

Пример выше создаст простой линейный график на основе заданного набора данных. Чтобы добавить оформление графика и осей, можно использовать CSS для задания стилей элементов или использовать методы D3.js для добавления заголовков, подписей осей и легенды.

Пример с простыми стилями для линии графика, оси Y и основного контейнера SVG:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

.axis text {
  font-size: 12px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
}

Пример для добавления оси Y с метками и заголовком:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

svg.append("g")
  .call(d3.axisLeft(yScale));

svg.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 0 - margin.left)
  .attr("x", 0 - (height / 2))
  .attr("dy", "1em")
  .style("text-anchor", "middle")
  .text("Значения");

Эти примеры помогут оформить график и добавить ось Y с метками и заголовком. Вы также можете дополнить график другими элементами и оформлением, в зависимости от ваших потребностей.