javascript - d3 classed()无法与多个类一起使用？

我创建了以下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（）函数？

最佳答案

我怀疑scss这样工作。

当您像上面那样嵌套时，“ highlight”样式将应用于内部元素为“ regionBackgroundHighlighter”的任何具有“ highlight”类的元素。

您需要上述scss的结构是：

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

关于javascript - d3 classed()无法与多个类一起使用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42958220/