Question

我在react.js中使用d3 library。

我有一个折线图，我想分成三个不同颜色的区域，如图所示。例如，如果我将阈值设置为2000，那么Are应该涂成绿色。同样适用于蓝色及其阈值。一旦我用硬编码值绘制它，那么我将需要实现一个滑块并使它更有动态，但我想这很简单，因为我想出如何实现这个区域着色。{{3 }}

这是我的初始代码：

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

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

React d3 - 如何：在一个折线图上有几个

1 个答案: