1
나는 angular2에서 svg 및 d3.js로 그래픽을 만들었습니다. This is picture of graphic. 그림에서 사실은 파란색이고 계획 값은 흰색으로 표시됩니다. 이제이 그래픽 영역을 두 가지 색상 (빨강 및 초록)으로 채워야합니다. 사실 값이 계획 값보다 큰 경우 계획 값이 사실 값보다 크면 빨간색으로 채우기 녹색으로 채우기. 여기에는 하나의 옵션이 있습니다 : 색상에 그라디언트 사용. 하지만 그라디언트의 중지 지점을 결정할 수는 없습니다. 당신은 어떤 솔루션이 있습니까angular2, d3.js에서 서로 다른 색상으로 채우는 방법은 무엇입니까?
interface Point {
x: number;
y: number;
x1: number;
y1: number;}
getLinePointsArea() {
return this.plan.values.map((val, i) => {
return {
x: i * this.lengthX,
y: val,
x1: i * this.lengthX,
y1: this.fact.values[i]
};
})
}
getArea(){
let points = this.getLinePointsArea();
let area = d3.svg.area<Point>()
.x(d => { return d.x })
.y(d => { return d.y })
.x1(d => { return d.x1 })
.y1(d => { return d.y1 })
.interpolate('cardinal');
return area(points);
}
getPolygonPathArea() : string {
let path = this.getArea();
return path;
}
그리고
<svg xmlns="http://www.w3.org/2000/svg" id="lineChart" width="100%" height="100%">
<defs>
<linearGradient id="planBg">
<!-- <stop *ngFor="let s of stopData" [attr.offset]="s.offset" [ngClass]="s.style" /> -->
<stop offset="100%" style="stop-color:#321F2A;stop-opacity:1" />
<stop offset="100%" style="stop-color: transparent;stop-opacity:1" />
</linearGradient>
</defs>
<g id="main" [attr.transform]="'translate('+padding.join(' ')+')'">
<g id="main" [attr.transform]="'translate(120, 120)'">
<g id="plan-gradient">
<path [attr.d]="getPolygonPathArea()" fill="url(#planBg)"></path>
</g>
</g>
</g>
.html 중에서 내 코드 :
이 각 .TS 파일에 내 코드? 아니면 어떻게 그라디언트의 정지 위치를 찾으십니까? 영어로 죄송합니다. 고맙습니다.
는