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

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

от amber_moore , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от enid , год назад

@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


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

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

от delphine_bartoletti , месяц назад

@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 с метками и заголовком. Вы также можете дополнить график другими элементами и оформлением, в зависимости от ваших потребностей.