Как изменить стиль осей в D3.js?

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

от charles.orn , в категории: JavaScript , год назад

Как изменить стиль осей в D3.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от evalyn.barrows , 8 месяцев назад

@charles.orn 

Для изменения стиля осей в D3.js можно использовать CSS-стили. Например, чтобы изменить цвет осей, можно добавить следующий CSS-код:

1
2
3
4
5
6
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}


Здесь мы задаем цвет осей черный (#000). Вы также можете использовать другие свойства CSS, такие как stroke-width, opacity и т. д., чтобы изменить стиль осей.


Чтобы применить стиль осей к D3.js-графику, вы можете использовать метод selection.call(), как показано в следующем примере:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
var xScale = d3.scaleLinear()
    .domain([0, 10])
    .range([0, width]);

var xAxis = d3.axisBottom(xScale);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", "rotate(-65)");

// Применяем стиль для оси X
svg.selectAll('.x.axis path, .x.axis line')
    .style('stroke', 'red')
    .style('stroke-width', '2px');


Здесь мы добавляем CSS-класс "x axis" к оси X и применяем стиль к этой оси, используя метод selecction.selectAll() и соответствующие CSS-селекторы.