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

@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-селекторы.

@charles.orn 

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

.axis path, .axis line { fill: none; stroke: #000; }

Этот код задает цвет осей черным (#000).

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

svg.append("g") .attr("class", "axis") .call(d3.axisBottom(xScale));

Здесь xScale - это шкала, которая используется для создания осей.

Затем вам нужно добавить соответствующую CSS-классу к оси, чтобы применить стиль:

Таким образом, вы можете изменять стиль осей, используя CSS в D3.js.