React.js：nvd3.jsのスタックされたMultiBarChartがレイヤーを正しく並べ替えません。

Question

MultiBarChartとそのstackedオプションを使用したいと思いますが、これまで成功していません。私が使用

モジュール：バージョン0.5.3

の

• バージョンのnvd31.8.2
• react-nvd3ここでは、関連するコードがあります。

  var props = { 
      type: "multiBarChart", 
      datum: [{ 
      key: "num", 
      values: [{ x: "A0", y: "5" },{ x: "A1", y: "5" },{ x: "A2", y: "5" },{ x: "A3", y: "5" }] 
      },{ 
      key: "num2", 
      values: [{ x: "A0", y: "1" },{ x: "A1", y: "1" },{ x: "A2", y: "1" },{ x: "A3", y: "1" }] 
      },{ 
      key: "num3", 
      values: [{ x: "A0", y: "2" },{ x: "A1", y: "2" },{ x: "A2", y: "2" },{ x: "A3", y: "2" }] 
      }], 
      containerStyle: { 
      width: 500, 
      height: 300 
      } 
  }; 
  
  ... 
  
  return (<div><NVD3Chart {...props}/></div>); 
  

  それはGroupedオプションを使用して正常に動作します：

  

  しかしStackedオプションでは動作しません。最後のキーnum3はnum1とnum2の合計にする必要がありますすべてのバーを、カバー：

  

  私はそれらのいずれかを置くと、num3バーが完全にnum1とnum2を隠し、そして値かのように示しています誰も私を助けてい

  

  ：num3そのものですか？

Answer 1

私は原因を見つけました。 Yフィールドの値は、stackedモードの数値である必要があります。

はすべきではありません：

{ 
    key: "num", 
    values: [{ x: "A0", y: "5" },{ x: "A1", y: "5" },{ x: "A2", y: "5" },{ x: "A3", y: "5" }] 
} 

しかし：

{ 
    key: "num", 
    values: [{ x: "A0", y: 5 },{ x: "A1", y: 5 },{ x: "A2", y: 5 },{ x: "A3", y: 5 }] 
}