Saya menggunakan Angular 2 dan D3.js. Saya ingin menunjukkan persegi panjang merah.
Ini hanya berfungsi jika saya meletakkan gaya di file style.css . Periksa plunkr ini
Ketika saya memasukkan gaya saya ke dalam komponen styles: []
, itu tidak berfungsi. Periksa plunkr ini
Lihat Stack Overflow .
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());
}
}
Itu dengan desain. Angular menambahkan nama kelas yang unik ke komponen dan menulis ulang gaya yang ditambahkan agar hanya berlaku untuk komponen tempat mereka ditambahkan.
D3 menghasilkan HTML secara dinamis tanpa pengetahuan Angulars dan Angular tidak dapat menerapkan kelas untuk membuat gaya diterapkan pada HTML yang dihasilkan.
Jika Anda menambahkan gaya pada file HTML titik masuk, Angular juga tidak menulis ulang gaya dan kelas pembantu yang ditambahkan tidak akan berpengaruh.
Dengan encapsulation: ViewEncapsulation.None
Angular tidak melakukan penulisan ulang ini, oleh karena itu hasilnya mirip dengan menambahkan HTML ke index.html
.
Atau Anda dapat menggunakan kombinator CSS penusuk bayangan yang baru saja diperkenalkan >>>
, /deep/
dan ::shadow
. Lihat juga http://stackoverflow.com/a/36225709/217408
@zoechi terima kasih banyak!! Ini bekerja dengan sempurna!
Untuk orang lain, untuk detail lebih lanjut tentang solusi @zoechi , silakan periksa di sini
Masalah ini telah dikunci secara otomatis karena tidak ada aktivitas.
Silakan ajukan masalah baru jika Anda mengalami masalah serupa atau terkait.
Baca lebih lanjut tentang kebijakan penguncian percakapan otomatis kami.
_Tindakan ini telah dilakukan secara otomatis oleh bot._
Komentar yang paling membantu
Itu dengan desain. Angular menambahkan nama kelas yang unik ke komponen dan menulis ulang gaya yang ditambahkan agar hanya berlaku untuk komponen tempat mereka ditambahkan.
D3 menghasilkan HTML secara dinamis tanpa pengetahuan Angulars dan Angular tidak dapat menerapkan kelas untuk membuat gaya diterapkan pada HTML yang dihasilkan.
Jika Anda menambahkan gaya pada file HTML titik masuk, Angular juga tidak menulis ulang gaya dan kelas pembantu yang ditambahkan tidak akan berpengaruh.
Dengan
encapsulation: ViewEncapsulation.None
Angular tidak melakukan penulisan ulang ini, oleh karena itu hasilnya mirip dengan menambahkan HTML keindex.html
.Atau Anda dapat menggunakan kombinator CSS penusuk bayangan yang baru saja diperkenalkan
>>>
,/deep/
dan::shadow
. Lihat juga http://stackoverflow.com/a/36225709/217408