Angular2 D3 - 未应用CSS样式

Question

我无法将我的CSS样式正确应用于在Angular2组件中创建的D3生成的<text>元素。

显然，（是？！）可以使用特殊的CSS选择器* >>>来实现所需的样式（请参阅http://plnkr.co/edit/Hc56mk07v0GD4W8rVzz1?p=preview示例），但同样的方法对我不起作用。 （我在RC4和D3 4.1上）

该元素确实具有正确的类属性集class="label-text"，但在引用的CSS文件中尽管* >>> .label-text { ... }定义，仍未应用样式。

有人可以对此有所了解吗，我们是否必须停用viewencapsulation还是有另一种方式？

Answer 1

当我对d3.js做了一些事情时，* >>>选择器没有任何问题，也许你只是在某个地方有错字。

这是带有角度RC4和D3.js v4.2的plunker，其中一些文本使用* >>>选择器应用于d3和css。 http://plnkr.co/edit/Nkv5S5DGHmWTiMoxBcgU?p=preview

Answer 2

好的，经过很多的调试后我终于找到了问题所在。 我通过以下方式访问svg元素：

this.htmlElement = this.element.nativeElement;
this.host = d3.select(this.element.nativeElement);
this.svg = this.host.append('svg');

由于某些原因* >>>在这里不起作用。 但是，如果我将css文件调整为

:host .label-text {
    ...
}

它运作得很好。

希望能帮助其他人解决同样的问题...