Reagieren d3 - How to: Mehrere Ares in einem Liniendiagramm

Question

Ich verwende d3 library in react.js.

Ich habe ein Liniendiagramm, das ich in drei verschiedenfarbige Bereiche teilen möchte, wie im Bild gezeigt. Wenn ich zum Beispiel den Schwellenwert von 2000 festlege, sollte Are grün dargestellt werden. Gleiches gilt für Blau und seine Schwelle. Sobald ich es mit den hartcodierten Werten bemalen lasse, muss ich einen Schieberegler implementieren und es ein bisschen dynamischer machen, aber ich denke, das ist einfach, so wie ich herausfinden kann, wie man diese Bereichsfärbung implementiert.

Dies ist der erste Code, den ich habe:

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

und Vorbereitung:

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

Und Daten:

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

Ich stelle mir vor ich Eigenschaften hinzufügen müssen, um meine Datenmodell mit der Farbzone, aber das ist, wo ich verloren bin ...

Nach dem Implementieren von Bereichen werden diese wie im Bild angezeigt.

Aber wie kann ich es bis ganz nach oben anzeigen, und es sollte keine allmähliche Abnahme geben. Es sollte streight Linie sein, wie auf dem vorherigen Bild?

Answer 1

Der Feldname in Ihrer chartSeries muss eine entsprechende Eigenschaft in Ihren Daten mit dem exakt gleichen Namen haben (es ist auch Groß-und Kleinschreibung).

Ihr Chart soll ein Array von Objects so sein:

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

und Ihre Daten sind in etwa so aussehen sollte:

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

Die wichtige Sache zu beachten ist, dass der Name von jedem Feld, das in geliefert wird, hat eine entsprechende Eigenschaft mit demselben Name in dem Datenarray der Objekte.