React d3 - 方法：1つの折れ線グラフ上の複数のアール

Question

react.jsでd3 libraryを使用しています。

私は、図に示すように、3つの異なる色の領域で分けたい折れ線グラフを持っています。たとえば、しきい値を2000に設定した場合、Areは緑で塗りつぶされます。同じことが青とその閾値にも当てはまります。一度ハードコードされた値でペイントすると、スライダを実装してよりダイナミックにする必要がありますが、このAreaのカラーリングを実装する方法を理解するのは簡単です。

これは私が持っている最初のコードです：

<div style={{marginLeft: '20px', width: (this.state.xWidth + 160)}}> 
     <Loader style={{float: 'left'}} loaded={this.state.loaded}> 
     <Chart width={this.state.xWidth + 160} 
       height={this.state.height} 
       data={this.state.parts} 
       title={this.state.title} 
       chartSeries={this.state.chartSeries} 
       x={this.state.xAxis} 
       > 
      <Line 
      chartSeries={this.state.chartSeries} 
      /> 
      <Area 
       chartSeries = {this.state.redZone} 
      /> 
     <Area 
       chartSeries = {this.state.greenZone} 
      /> 
     <Area 
       chartSeries = {this.state.blueZone} 
      /> 
      <Xaxis/> 
      <Yaxis/> 
      <Xgrid/> 
      <Ygrid/> 

     </Chart> 
     </Loader> 
    </div> 

と準備：私は私にプロパティを追加する必要が想像

{ 
    "name": "Miss Demond Weissnat V", 
    "zoneCount": 10000,   
    "city": "Savionberg",   
    "index": 1 
}, 
{ 
    "name": "Easton Mante", 
    "zoneCount": 2000,   
    "city": "Kutchberg",   
    "index": 2 
}, ... 

：

redZone = [ 
     { 
     field: 'redZone', 
     name: 'Red Zone ', 
     color: '#005C00', 
     style: { 
      "strokeWidth": 2, 
      "strokeOpacity": .2, 
      "fillOpacity": .2 
     } 
     } 
    ], 
    greenZone = [ 
     { 
     field: 'greenZone', 
     name: 'Green Zone ', 
     color: '#005C00', 
     style: { 
      "strokeWidth": 2, 
      "strokeOpacity": .2, 
      "fillOpacity": .2 
     } 
     } 
    ], 
    blueZone = [ 
     { 
     field: 'blueZone', 
     name: 'Blue Zone ', 
     color: '#005C00', 
     style: { 
      "strokeWidth": 2, 
      "strokeOpacity": .2, 
      "fillOpacity": .2 
     } 
     } 
    ], 

とデータカラーゾーンのデータモデルですが、それは私が失われた場所です。

領域を実装した後は、画像に表示されるように領域が表示されます。

しかし、どうすれば上に表示することができますか？また、徐々に減少する必要はありません。それは前の画像のように、streightの線でなければなりませんか？

Answer 1

chartSeriesのフィールド名は、同じ名前のデータに対応するプロパティを持つ必要があります（大文字と小文字も区別されます）。

var data = [{ 
     "name": "Miss Demond Weissnat V", 
     "zoneCount": 10000, 
     "city": "Savionberg", 
     "index": 1, 
     "redZone": 10000 
    }, { 
     "name": "Easton Mante", 
     "zoneCount": 2000, 
     "city": "Kutchberg", 
     "index": 2, 
     "greenZone": 10000 
    }, { 
     "name": "What ever", 
     "zoneCount": 3000, 
     "city": "wherever", 
     "index": 3, 
     "blueZone": 3000 
    }] 

注意すべき重要なことは、その名前です。

あなたchartSeriesは、このようなObjectsのArrayことになっている。このようになるはずです

redZone = [{ 
     field: 'redZone', 
     name: 'Red Zone ', 
     color: '#005C00', 
     style: { 
     "strokeWidth": 2, 
     "strokeOpacity": .2, 
     "fillOpacity": .2 
     } 
    }, { 
     field: 'greenZone', 
     name: 'Green Zone ', 
     color: '#005C00', 
     style: { 
     "strokeWidth": 2, 
     "strokeOpacity": .2, 
     "fillOpacity": .2 
     } 
    }, { 
     field: 'blueZone', 
     name: 'Blue Zone ', 
     color: '#005C00', 
     style: { 
     "strokeWidth": 2, 
     "strokeOpacity": .2, 
     "fillOpacity": .2 
     } 
    }]; 

そして、あなたのデータがありますchartSeriesで提供されるすべてのフィールドの、対応するプロパティが、オブジェクトのデータ配列内の同じ名前を持ちます。