Question

我在angular2上用svg和d3.js制作了图形。 This is picture of graphic。在图中，事实线为蓝色，计划值为白色。现在需要用两种颜色（红色和绿色）填充此图形区域。当事实值超过计划值时，填充红色，如果计划值超过事实值，请填写绿色。我有一个选项可以做到这一点：使用渐变颜色。但是我无法确定渐变的停止点。

这是我在angular .ts文件中的代码：

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;
}

我的代码.html

<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>

你有什么解决方案？或者如何找到渐变的停止位置？对不起我的英语不好。谢谢。

Answer 1

我建议你的html模板上只有一个svg元素，
在你的.ts文件中创建类似“draw（...）”，“update（...）”等功能，
并在那里实现你的d3逻辑，就像普通的javascript，
否则你对d3使用的好处太少，而且我认为太复杂了。

如何在angular2，d3.js中填充不同颜色的区域？

1 个答案: