javascript - 不使用 CSS 设置轴的样式

Question

我正在用 d3 构建折线图 并试图让我的刻度线变成灰色，而我的轴和刻度线标签将是深灰色。如何在不使用 CSS 的情况下在 d3 中设置此内联样式？我似乎不太明白。提前致谢!

这就是我构建 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>元素。让我们看看source code :

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 绘制所有内容属性(property)!看看:

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>