React d3 - 操作方法：一张折线图上的多个区域

Question

我在 react.js 中使用 d3 library。

我有一个折线图，我想把它分成三个不同颜色的区域，如图所示。例如，如果我将阈值设置为 2000，那么 Are 应该涂成绿色。蓝色及其阈值也是如此。一旦我让它使用硬编码值进行绘制，那么我将需要实现一个滑块并使其更加动态，但我想这很容易，因为我想出了如何实现这个区域着色。

这是我的初始代码：

<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 中的字段名称必须在您的数据中有一个对应的属性且名称完全相同（也区分大小写）。

您的图表系列应该是 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
      }
    }];

你的数据应该是这样的：

    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 中提供的每个字段的名称在对象的数据数组中都有一个对应的属性具有相同的名称。

React d3 - 操作方法：一张折线图上的多个区域

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

javascript

d3.js

reactjs

react-d3