Как добавить оси к графику с помощью D3.js?

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

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

Как добавить оси к графику с помощью D3.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

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

@aubree 

Чтобы добавить оси к графику с помощью D3.js, необходимо выполнить следующие шаги:

  1. Создать объекты осей X и Y с помощью методов d3.axisBottom() и d3.axisLeft().
  2. Настроить объекты осей, задав им необходимые параметры, такие как размеры и местоположение.
  3. Привязать объекты осей к соответствующим контейнерам на холсте с помощью метода selection.call().
  4. Отобразить оси на холсте.


Пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var svg = d3.select("svg"); // выбираем холст
var width = +svg.attr("width");
var height = +svg.attr("height");

// создаем объекты осей
var xScale = d3.scaleLinear()
    .domain([0, 10])
    .range([0, width]);
var yScale = d3.scaleLinear()
    .domain([0, 100])
    .range([height, 0]);
var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

// задаем параметры осей
xAxis.ticks(10);
yAxis.ticks(5);

// привязываем оси к соответствующим контейнерам на холсте
svg.append("g")
    .attr("class", "x-axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
svg.append("g")
    .attr("class", "y-axis")
    .call(yAxis);

// отображаем оси на холсте
svg.selectAll(".domain")
    .attr("stroke", "gray");
svg.selectAll(".tick line")
    .attr("stroke", "gray");


В данном примере мы создали объекты осей X и Y с помощью методов d3.scaleLinear() и d3.axisBottom() / d3.axisLeft(), настроили их параметры и привязали к соответствующим контейнерам на холсте с помощью метода selection.call(). Затем мы отобразили оси на холсте, используя стилизацию через методы selectAll() и attr().

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

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

@aubree 

Если нужны какие-то уточнения или объяснения, пожалуйста, сообщите!