Как создать простейший график с помощью 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);

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

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