Я использую Angular 2 и D3.js. Я хочу показать красный прямоугольник.
Он работает только в том случае, если я помещаю стили в файл style.css. Проверьте этот plunkr
Когда я помещаю свои стили в компонент styles: [], он не работает. Проверьте этот plunkr
Как это сделать, если я использую компонент styles: []? Благодаря
ОБНОВЛЕНИЕ: @micronyks предоставляет решение, но делает стили в компоненте глобальными, в основном не имеет никакого различия с записью в файле style.css. В этом plunkr он показывает, что стиль в одном компоненте будет переопределять другие стили компонентов, поэтому не может отображаться зеленые и красные прямоугольники.
ОБНОВЛЕНИЕ 2: @Günter отлично справится с этой проблемой!! Напомним, что для Günter: для него требуется не менее Angular beta 10. (Мои другие утилиты используют Angular beta 8). Рабочая демо для зеленого и одного красного прямоугольника с использованием Angular beta 12 - .
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());
}
}