React d3 - How to: Несколько ares на одной линейной диаграмме

Question

Я использую d3 library в react.js.

У меня есть линейная диаграмма, которую я хотел бы разделить на три разные цветные области, как показано на рисунке. Например, если я установил treshold 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> 

и подготовка:

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

И данные:

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

я представляю мне нужно добавить свойства к моему модель данных с цветовой зоной, но вот где я теряюсь ...

После реализации областей они отображаются, как показано на изображении.

Но как я могу заставить его отображать весь путь до вершины, и не должно быть постепенного снижения. Это должна быть линия стрелки, как на предыдущей картинке?

Answer 1

Имя поля в вашем chartSeries должно иметь соответствующее свойство в ваших данных с тем же самым именем (также чувствительным к регистру).

Your ChartSeries должен быть Array из Objects так:

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

И ваши данные должны выглядеть примерно так:

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, имеет соответствующее свойство с тем же именем в массиве данных объектов.