javascript - React d3 - How to: Several ares on one line chart -

i using d3 library in react.js.

i have line chart, divide in 3 different colored areas, shown in picture. example if set treshold of 2000, should painted in green. same goes blue , treshold. once paint hard coded values, need implement slider , bit more dynamic, guess easy soo figure out how implement area coloring.

this initial code have:

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

and preparation:

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         }       }     ], 

and data:

{     "name": "miss demond weissnat v",     "zonecount": 10000,             "city": "savionberg",             "index": 1 }, {     "name": "easton mante",     "zonecount": 2000,             "city": "kutchberg",             "index": 2 }, ... 

i imagine need add properties data model color zone, lost...

after implementing areas, displayed seen in image.

but how can make display way top, , there should no gradual decline. should streight line, on previous picture?

the field name in chartseries has have corresponding property in data exact same name(it case sensitive).

your chartseries supposed array of objects this:

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

and data should this:

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

the important thing note name of every field supplied in chartseries has corresponding property same name in data array of objects.