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

Пользователь

от amber_moore , в категории: JavaScript , 2 месяца назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от enid , 5 дней назад

@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);


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


Пример простого графика с помощью D3.js


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