更改 D3 Observable 中 axes/ticks 标签的字体大小和颜色（未附加文本）

Question

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

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

但是 Observable 不提供通常的 HTML 文件来放置 CSS.

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

我尝试为附加的 g 添加样式：

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

但无济于事。

Answer 1

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

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

只需创建一个新单元格（单击 + 符号）和 copy/paste 上面的代码段。

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())

结果：

更改 D3 Observable 中 axes/ticks 标签的字体大小和颜色（未附加文本）

Change the font-size and color of the labels on the axes/ticks in D3 Observable (no text appended)

d3.js

observablehq