Установка стиля оси без CSS

Question

Я строю линейный график с помощью d3 и пытаюсь сделать мои тики серыми, в то время как мои оси и метки тиков будут темно-серыми.Как я могу стилизовать это встроенное в d3, без использования CSS?Кажется, я не могу понять это правильно.Заранее спасибо!

Вот как я строю свои оси x и y:

var xAxis = d3.axisBottom(x)
  .scale(x)
  .ticks((width + 2) / (height + 2))
  .tickSize(-height)
  .tickPadding(10)
  .tickFormat(d3.timeFormat("%b %d, %H:%M:%S"))


var yAxis = d3.axisLeft(y)
  .scale(y)
  .ticks(5)
  .tickSize(-(width - 100))
  .tickPadding(10)

Как я добавляю их:

var gX = svg.append("g")
  .attr("class", "axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
var gY = svg.append("g")
  .attr("class", "axis--y")
  .call(yAxis)

Я пытался поставить:

.style("stroke", "#c3c3c3")

На моей оси y вот так:

var gY = svg.append("g")
  .attr("class", "axis--y")
  .call(yAxis).style("stroke", "#c3c3c3")

Но это меняет только цвет моих тиковых меток, а не линий ... где я могу ошибаться?

Спасибо

Answer 1

Когда вы делаете это ...

svg.append("g").call(yAxis).style("stroke", "#c3c3c3")

... вы фактически устанавливаете stroke элемента <g>, который содержит пути, строки и тексты.Очевидно, вы ожидаете, что это установит стиль всех этих элементов.

Однако генератор оси D3 автоматически устанавливает стили элементов <line> и <path>.Давайте посмотрим на исходный код :

path = path.merge(path.enter().insert("path", ".tick")
    .attr("class", "domain")
    .attr("stroke", "currentColor"));

line = line.merge(tickEnter.append("line")
    .attr("stroke", "currentColor")
    .attr(x + "2", k * tickSizeInner));

Следовательно, эти стили, установленные генератором осей, переопределят стиль, установленный для группы (в приведенном выше коде currentColor имеет видпросто CSS currentColor ).

Давайте посмотрим на это в этой демонстрации, используя красный для stroke:

const svg = d3.select("svg");
const g = svg.append("g");
const axis = d3.axisBottom(d3.scaleLinear().range([10, 290]));
g.call(axis).style("stroke", "red")

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

Как видите, мы применили стиль к группе, но только текстовые элементы унаследовали его (и они выглядят уродливо, потому что это stroke, а не стиль fill).

Решение :

Выберите нужные элементы и примените к ним стиль.

Например,выделение линий и путей:

const svg = d3.select("svg");
const g = svg.append("g");
const axis = d3.axisBottom(d3.scaleLinear().range([10, 290]));
g.call(axis).selectAll("line,path").style("stroke", "red")

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

---

PS : поскольку в новой версии D3 используется currentColor, вы можете рисовать все, просто используя colorимущество!Посмотрите:

const svg = d3.select("svg");
const g = svg.append("g");
const axis = d3.axisBottom(d3.scaleLinear().range([10, 290]));
g.call(axis).style("color", "red")

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>