javascript - cal-heatmap - 如何根据 rect .q1{} 颜色更改文本颜色？

Question

使用 cal-heatmap 从 1 个月(30 天)的日期/价格值日历中给出这一天:

<g>
<rect class="q1 graph-rect hover_cursor" width="34" height="34" x="144" y="36">
<title>12345</title>
<text class="subdomain-text" x="161" y="53" text-anchor="middle" dominant-baseline="central"> 8</text>
</g>

我知道该对象是使用类名 ( .q1 ) 设置样式的。

但是，我们如何才能将元素的样式与通用 .subdomain-text{} 分开？命中所有元素的 CSS 规则？

如果 .q1 类附加到父元素 <g> , 我们可以使用后代 CSS 选择器来处理这个问题，所以本质上是

1) 我希望能够做到这一点:

`g.q1 text {fill:red}`

...这将让我根据这个总体日期在 .ql css 颜色范围内的事实自定义文本颜色。

2) 我还想为“今天”之前几天的文本设置独特的样式...

3) ...并单独设计用于 NULL 价格的默认样式，我相信它来自 .subdomain-text {} CSS 规则。 (并非所有 30 天都必须有价格值 - 它可能为空)。

有没有办法让元素的样式超出默认 .subdomain-text{}规则？

Answer 1

您可以为文本元素编写新的 CSS 规则，例如:

.cal-heatmap-container{
  .q1  + title + .subdomain-text {
    fill: red;
  }
  .q2,
  .q3,
  .q4,
  .q5{
    + title + .subdomain-text {
      fill: #ffffff;
    }
  }
}

更多信息:https://github.com/kamisama/cal-heatmap/issues/143