d3.js - 更改 D3 Observable 中轴/刻度上标签的字体大小和颜色（未附加文本）

Question

我在D3 Observable上使用这个条形图。我需要更改轴/刻度上标签的字体大小和颜色。在之前的 D3 方法中，您可以简单地在 CSS 中执行此操作，例如：

text {
    fill : white;
    font-size : 22px;
}

但是 Observable 没有提供用于放置CSS的常用 HTML 文件。

如果您查看文件，似乎没有附加任何文本，尽管在检查元素中您可以看到标签确实是“文本”

我尝试在附加的 g 中添加样式：

svg.append("g")
  .style("fill", "white")
  .call(xAxis); 

但无济于事。

Answer 1

在Observable笔记本中，您可以使用html带有模板文字的方法添加 CSS，如下所示：

html`<style>
  text {
    fill : white;
    font-size : 22px;
}
  </style>`

只需创建一个新单元格（单击+符号）并复制/粘贴上面的代码段。

Answer 2

通过查找包含XAxis和yAxis的单元格，您可以在 Observable 中设置此图表上的文本样式。

和...

在 .attr("transform") 行下方添加此行用于字体大小：

.style("font-size", "22px")

...以及这条颜色线：

.attr("color", "red")

不知道为什么 D3 决定将 .style("fill" 更改为 .attr("color"

您的单元格现在应如下所示：

xAxis = g => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .style("font-size", "22px")
    .attr("color", "red")
    .call(d3.axisBottom(x)
        .tickSizeOuter(0))

和...

yAxis = g => g
    .attr("transform", `translate(${margin.left},0)`)
    .style("font-size", "22px")
    .attr("color", "red")
    .call(d3.axisLeft(y))
    .call(g => g.select(".domain").remove())

结果：