d3 classed() 在多个类中不能按预期工作？答案

【问题标题】：d3 classed() not working as expected with multiple classes?d3 classed() 在多个类中不能按预期工作？
【发布时间】：2017-03-22 17:03:55
【问题描述】：

我创建了以下 scss 定义：

.regionBackgroundHighlighter
{
    .highlight
    {
        fill:#CCCCCC;
        opacity:0.5;
        stroke:black;
        stroke-width:0;
        display:inline;
        visibility:visible;
    }
}

我正在尝试将此 css 类设置为一个元素，如下所示，但未应用样式：

d3.select(regionBackground).classed('regionBackgroundHighlighter highlight', true);

在 Chrome 开发工具中，regionBackground 在其 classList[] 中同时显示 regionBackgroundHighlighter 和 highlight，但实际样式并未应用于元素。但是，如果我传递与一级非嵌套类相同的类定义，则样式将按预期应用：

.regionBackgroundHighlight
{
    fill:#CCCCCC;
    opacity:0.5;
    stroke:black;
    stroke-width:0;
    display:inline;
    visibility:visible;
}

d3.select(regionBackground).classed('regionBackgroundHighlight', true);

对于我在上面第一个示例中定义的 css 结构类型，我是否需要以不同的方式使用 d3 classed() 函数？

【问题讨论】：

标签： javascript css d3.js sass

【解决方案1】：

我怀疑 scss 是这样工作的。

当您像上面那样嵌套时，'highlight' 样式将应用于任何具有类为 'highlight' 的元素，其中包含类为 'regionBackgroundHighlighter' 的元素。

上述scss需要的结构是：

<svg>
 <g class="regionBackgroundHighlighter">
  <g class="highlight">
  </g>
 </g>
</svg>

【讨论】：

【解决方案2】：

@taran-j 建议如何修复标记以匹配您的 scss，反之亦然 - 修复您的 scss：

.regionBackgroundHighlighter
{
  &.highlight
  {
    fill:#CCCCCC;
    opacity:0.5;
    stroke:black;
    stroke-width:0;
    display:inline;
    visibility:visible;
  }
}

这将防止类嵌套在已编译的 css 中。

【讨论】：