用 css 调整 c3 轴标签答案

【问题标题】：Adjust c3 axis labels with css用 css 调整 c3 轴标签
【发布时间】：2021-01-10 01:14:44
【问题描述】：

我正在使用 R 的 c3 包，它是 Masayuki Tanaka 的 C3 javascript 图表库的包装器。

我下面的 c3 图表截断了 x 轴上的最后一个日期。

使用 Chrome Inspector 我可以手动将text-anchor: middle 调整为text-anchor: end

这似乎有效。

但是，我不明白如何用 css 做到这一点。

这是我的 R 脚本和相关的 css，尽管我认为 R 与这里的问题无关。

R 脚本

library(shiny)
library(c3)

data <- data.frame(a = abs(rnorm(20) * 10),
                   b = abs(rnorm(20) * 10),
                   date = seq(as.Date("2014-01-01"), by = "month", length.out = 20))


ui <- fluidPage(
  
  includeCSS("c3.css"),
  
  c3Output("chart",  height = "100%")
)

server <- function(input, output, session) {
  output$chart <- renderC3({
    data %>%
      c3(x = 'date') %>%
      tickAxis('x', count = 5, format = '%Y-%m-%d') 
  })
}

shinyApp(ui, server)

css

.c3-line {
  stroke-width: 4px !important; 
}

.c3-axis-x-label {
    text-anchor: end; 
}

【问题讨论】：

如果您粘贴一个工作示例，我可能会为您提供帮助。
我包含了我的 R 脚本和相关的 css 文件。因此，当您说“粘贴一个工作示例”时，您一定是指别的意思。如果可以，请澄清。
您可以使用您的代码在 jsfiddle、codepen 等网站中创建一个真实的工作示例
我认为我们之间的脱节是我使用 R 生成 c3 图表，我需要使用 css 对其进行修改。
我已经使用 CSS 提供了答案。

标签： css r c3.js

【解决方案1】：

您尚未粘贴任何实际代码，但下面的代码很可能会有所帮助：

.c3-axis-x g.tick:nth-last-child(3) text {
  transform:translateX(-5%);
}

您需要正确定位文本并根据需要调整值。

编辑：实际上它不是:last-child - 根据一些实际代码进行了调整。本质上，您需要正确定位选择器并应用 transform 属性。

Edit2：所以实际上是 .c3-axis-x 组包含刻度文本。代码更新（再次）

【讨论】：

您的解决方案有效。还首选用绝对值替换百分比，因为它也适用于 iPhone。对我来说，你是如何找到这个选择器的仍然是个谜，“.c3-axis-x g.tick:nth-last-child(3) text”。
感谢您接受此正确回复。您首先调查检查器的层次结构。例如，检查您上传的屏幕截图。您要用于定位刻度标签的父容器是c3-axis c3-axis-x... 在这种情况下，我们更喜欢c3-axis-c，因为c3-axis 类也可能用于Y 轴。然后，您需要使用 tick 类来定位特定组 g，该类包含您要更改的最后一个刻度标签 - 日期。现在，C3.js 作为一个库以特定的方式呈现所有图表，所以我在这里呈现了一个图表并注意到...
(cont)...保存最后一个刻度标签的组是从末尾倒数的第三个元素（因此是:nth-last-child(3)）。最后，text 元素是包含实际刻度文本的元素，因此它是您要更改的元素，因为如果您注意到 tick 组也包含刻度线。这一切现在对你来说更有意义了吗？如果您有兴趣了解更多信息，我建议您搜索 CSS specificity 和 CSS selectors。
感谢您的详细解释，并且肯定需要了解更多有关 CSS 特异性和 CSS 选择器的信息。

【解决方案2】：

一件事立刻浮现在我的脑海中：

使用您的 CSS，您只针对“日期”元素。您的其他“文本”元素没有类，因此“.c3-axis-x-label”的 css 将仅针对第一个文本元素。

尝试将“c3-axis-x-label”类也添加到您的其他“文本”元素中。

另一件事：

您要调整的“文本”标签的样式写在标签中

当你像这样设置样式时，它总是会覆盖应用的 CSS。

我能想到的一个解决方案是在您的 CSS 中添加 !important 以覆盖样式。我不建议使用 !important，但如果直接更改 css 太困难，那么这可能是一个解决方案。

如果您可以向其他文本元素添加一个类，请尝试将样式应用于您的 CSS 中的“文本”：

g > text {
   text-anchor: end; 
}

如果有任何帮助，请告诉我。否则一些代码会派上用场来帮助你

【讨论】：