带有 Dashing 和 Rickshaw 的 CSS 选择器

Question

所以我在 Dashing 上运行了许多不同的图表使用单个 ' Rickshaw ' 小部件。我想使用 CSS 选择器来定义 x 轴 View 。我目前的设置是这样的...

它仪表板.erb:

<li data-row="1" data-col="1" data-sizex="6" data-sizey="6">
  <div id="weekly" data-id="etvvrb" data-view="Rickshawgraph" data-title="Weekly ETV reach" data-moreinfo="Week commencing" data-color-scheme="rainbow" data-renderer="line" data-x-axis="weekly"></div>
</li>  

这为 CSS 中的选择器名称定义了一个 DIV ID，在我们的 CSS 中...

  .x_tick {
    position: absolute;
    bottom: 0;
    fill: $tick-color;

    .title {
      font-size: 20px;
      color: $tick-color;
      opacity: 0.5;
      padding-bottom: 3px;
    }
  }

  #weekly.x_tick  {   
    position: absolute;
    bottom: 0;
    fill: $tick-color;

      .title {
      font-size: 9px;
      color: $tick-color;
      opacity: 0.5;
      padding-bottom: 3px;
      writing-mode:tb-rl;
      -webkit-transform:rotate(90deg);
      -moz-transform:rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform:rotate(90deg);
      white-space:nowrap;
      display:block;
      bottom:0;
      width:0.5px;
      height:20px;
    }
  }

基本上我假设它会读取 ID 并为该 ID 使用不同的 CSS，但它似乎完全忽略了它。我感觉 ID 根本没有像我预期的那样被传递，我不确定为什么。

如果有人在这方面有任何背景，尤其是在使用 Dashing 方面，任何建议将不胜感激。

Answer 1

我想通了。

Dashing 将生成一个基于 data-id 和 data-view 标签的类对象(可能通过 JS，但我可能在那里错了)。

这将看起来像 widget-data-view.data-id。

这意味着您可以使用 JS 生成的元素在您的 CSS 文档中创建一个新类。在我的例子中，这看起来像:

   .widget-rickshawgraph {
       /* CSS stuff */
    }

   .widget-rickshawgraph.DATA-ID {
        .x_tick > .title {
      /* CSS overwrite */
   } 

希望这是有道理的。谢谢:)