D3.js组件中的样式不以角度2显示 [英] Styles in component for D3.js do not show in angular 2

问题描述

我使用Angular 2和D3.js。

I am using Angular 2 and D3.js. I want to show a red rectangle.

只有在 style.css 文件中输入样式时，它才有效。
检查这个plunkr

It only works if I put styles in the style.css file. Check this plunkr

当我将我的样式放在组件 styles：[] 中，它不工作。检查这个plunkr

When I put my styles in the component styles: [], it does not work. Check this plunkr

如何让它工作时我使用组件 styles：[] ？感谢

How to let it work when I use the component styles: []? Thanks

UPDATE： @micronyks提供了一个解决方案，但它使组件中的样式全局， style.css 文件。在此plunkr 中，它在一个组件中显示的样式将覆盖另一个组件的样式，因此无法显示绿色和红色矩形。

UPDATE: @micronyks provides a solution, but it makes the styles in the component global, basically no difference with writing in style.css file. In this plunkr, it shows style in one component will override another component's styles, so cannot show green and red rectangles.

更新2： @Günter的方式完美解决这个问题！只是一个提醒，对于Günter的方式：它至少需要Angular beta 10.（我的其他plunkr使用Angular beta 8）工作演示为绿色和一个红色矩形使用Angular beta 12是此处。

UPDATE 2: @Günter's way perfectly solve this problem!! Just a remind, for Günter's way: it needs at least Angular beta 10. (My other plunkrs use Angular beta 8) The working demo for green and one red rectangle using Angular beta 12 is here.

import {Component} from 'angular2/core'
@Component({
  selector: 'my-app',
  providers: [],
   styles: [`
    /*this does not work*/
    .bar {
      fill: red;
    }
  `],
  template: `
    <div>
      <svg class="chart"></svg>
    </div>
  `,
  directives: []
})
export class App {
  constructor() {}

  ngOnInit() {
    this.draw();
  }

  draw() {
    let data = [{name: 'A', value: 1}];
    let width = 400, height = 200;

    let x = d3.scale.ordinal().rangeRoundBands([0, width]);
    let y = d3.scale.linear().range([height, 0]);

    let chart = d3.select(".chart")
      .attr("width", width)
      .attr("height", height)
      .append("g");

    x.domain(data.map(function(d) { return d.name; }));
    y.domain([0, d3.max(data, function(d) { return d.value; })]);

    chart.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.name); })
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .attr("width", x.rangeBand());
  }
}

推荐答案

strong> ViewEncapsulation.Emulated（默认）

ViewEncapsulation.Emulated (default)

这是设计。 Angular添加了组件特有的类名，并重写添加的样式，以便只应用于添加它们的组件。

That's by design. Angular adds class names unique to components and rewrites the added styles to only apply to the components where they were added.

D3在没有Angulars知识的情况下动态生成HTML，Angular不能应用类来使样式适用于生成的HTML。

D3 generates HTML dynamically without Angulars knowledge and Angular can't apply the classes to make the styles apply on the generated HTML.

如果您在入口点HTML文件中添加样式，Angular也不会重写样式，并且添加的辅助类不会生效。

If you add the styles at the entry point HTML file, Angular also doesn't rewrite the styles and the added helper classes don't take effect.

ViewEncapsulation.None

使用封装：ViewEncapsulation.None Angular这种重写，因此结果类似于将HTML添加到 index.html 。

With encapsulation: ViewEncapsulation.None Angular doesn't do this rewriting, therefore the result is similar to adding the HTML to the index.html.

阴影穿孔

或者，您可以使用最近推出的阴影穿孔CSS组合器>>> ， / deep / 和 :: shadow （ :: shadow 只是被 替换，因此非常有限）。另请参见 http://stackoverflow.com/a/36225709/217408 和 Plunker

Alternatively you can use the recently introduced shadow piercing CSS combinators >>>, /deep/ and ::shadow (::shadow is just replaced by a and thus very limited). See also http://stackoverflow.com/a/36225709/217408 and the Plunker

：host / deep / div {
红色;
}

:host /deep/ div { color: red; }

SASS

deep / 与SASS协同工作，但别名>>> 不适用。

/deep/ works fine with SASS but the alias >>> doesn't.

shadow-piersing CSS组合器被Angular重写，它们不需要被浏览器支持。 Chrome支持他们一段时间，但他们已经被弃用了 - 但正如所说，这没关系，因为Angular重写他们使用其封装模拟。

The shadow-piersing CSS combinators are rewritten by Angular and they don't need to be supported by the browsers. Chrome supported them for a while but they are deprecated - but as said, that doesn't matter, because Angular rewrites them to use its encapsulation emulation.

ViewEncapsulation .Native

Angular不支持以任何方式从外部设计这样的组件。只有浏览器提供类似CSS变量的支持，这些可以使用。

Angular doesn't support any way to style such components from the outside. Only if the browser provides support like CSS variables then these can be used.

这篇关于D3.js组件中的样式不以角度2显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！