angular2、d3.jsで色を塗りつぶす方法は？

Question

私はsvgで図形を作成し、angular2ではd3.jsを作成しました。 This is picture of graphic。写真のファクトラインは青で、プランの値は白い点線です。 このグラフィック領域を2色（赤と緑）で塗りつぶす必要があります。 ファクト値が計画値を超える場合は、計画値がファクト値以上の場合は、赤色の を入力し、緑色で塗りつぶします。 これには1つのオプションがあります： 色のグラデーションを使用します。しかし、私は勾配の停止点を決定することはできません。あなたはどのような解決策を持っているん

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ファイルで、私のコードですか？または、グラデーションの停止位置を見つける方法は？ 私の英語を残念に思っています。ありがとうございました。

Answer 1

私は、ちょうどあなたのHTMLテンプレート上の1つのSVG要素を持つことをお勧めします
は「ドロー（...）」、「アップデート（...）」のような関数を作るというように、あなたの.TSファイルで、
通常のjavascriptのようにそこにあなたのd3ロジックを実装すると、
そうしなければ、d3の使用量があまりにも少なくなりすぎて、私の意見ではあまりにも複雑になります。