私はAngular2とD3.jsを使用しています。 赤い長方形を表示したい。
style.cssファイルにスタイルを入れた場合にのみ機能します。 このプランカーをチェックしてください
スタイルをコンポーネントstyles: []
に入れると、機能しません。 このプランカーをチェックしてください
StackOverflowを参照してください。
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());
}
}
これは仕様によるものです。 Angularは、コンポーネントに固有のクラス名を追加し、追加されたスタイルを、それらが追加されたコンポーネントにのみ適用されるように書き直します。
D3はAngularsの知識がなくても動的にHTMLを生成し、Angularは生成されたHTMLにスタイルを適用するためにクラスを適用できません。
エントリポイントのHTMLファイルにスタイルを追加すると、Angularもスタイルを書き換えず、追加されたヘルパークラスは有効になりません。
encapsulation: ViewEncapsulation.None
を使用すると、Angularはこの書き換えを行わないため、結果はHTMLをindex.html
に追加するのと同様になります。
または、最近導入されたシャドウピアスCSSコンビネータ>>>
、 /deep/
、および::shadow
を使用することもできます。 http://stackoverflow.com/a/36225709/217408も参照してください
@zoechiどうもありがとうございました!! 完璧に動作しています!
他の人の場合、 @ zoechiのソリューションの詳細については、こちらを確認してください
この問題は、非アクティブのために自動的にロックされています。
同様の問題または関連する問題が発生した場合は、新しい問題を提出してください。
自動会話ロックポリシーの詳細をご覧ください。
_このアクションはボットによって自動的に実行されました。_
最も参考になるコメント
これは仕様によるものです。 Angularは、コンポーネントに固有のクラス名を追加し、追加されたスタイルを、それらが追加されたコンポーネントにのみ適用されるように書き直します。
D3はAngularsの知識がなくても動的にHTMLを生成し、Angularは生成されたHTMLにスタイルを適用するためにクラスを適用できません。
エントリポイントのHTMLファイルにスタイルを追加すると、Angularもスタイルを書き換えず、追加されたヘルパークラスは有効になりません。
encapsulation: ViewEncapsulation.None
を使用すると、Angularはこの書き換えを行わないため、結果はHTMLをindex.html
に追加するのと同様になります。または、最近導入されたシャドウピアスCSSコンビネータ
>>>
、/deep/
、および::shadow
を使用することもできます。 http://stackoverflow.com/a/36225709/217408も参照してください