Question

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

它dashboard.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 */
   }

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

带有Dashing和Rickshaw的CSS选择器

1 个答案: