d3.js-v4 堆积条形图答案

【问题标题】：d3.js-v4 stacked bars chartd3.js-v4 堆积条形图
【发布时间】：2016-08-02 20:21:44
【问题描述】：

我在创建堆积条形图时遇到问题。

我做了下面的例子，很好 http://bl.ocks.org/mbostock/3886208

但现在我有其他数据格式：（这是我的数据的简短示例）

var data = [
  {
    "PERIOD": 2014001,
    "SUBMITTER": "oanikit2",
    "distr_count": 16
  },
  {
    "PERIOD": 2014001,
    "SUBMITTER": "nvlodavs",
    "distr_count": 21
  },
  {
    "PERIOD": 2014001,
    "SUBMITTER": "manufrie",
    "distr_count": 39
  },
  {
    "PERIOD": 2014001,
    "SUBMITTER": "mtalyshi",
    "distr_count": 14
  }
]

使用嵌套我将其转换为：（下面的短数据示例）

 var nested = d3.nest().key(function (d){return d.SUBMITTER}).entries(data);
    d3.select("body").append("pre").text(JSON.stringify(nested,null,2)); //just to render data on page 

[
  {
    "key": "oanikit2",
    "values": [
      {
        "PERIOD": 2014001,
        "SUBMITTER": "oanikit2",
        "distr_count": 16
      },
      {
        "PERIOD": 2014002,
        "SUBMITTER": "oanikit2",
        "distr_count": 18
      }
    ]
  },
  {
    "key": "nvlodavs",
    "values": [
      {
        "PERIOD": 2014001,
        "SUBMITTER": "nvlodavs",
        "distr_count": 21
      },
      {
        "PERIOD": 2014002,
        "SUBMITTER": "nvlodavs",
        "distr_count": 24
      }
    ]
  }
]

但不知道如何更进一步。如何获得 y0 值？需要在 PERIOD 上进行系列，并以 distr_count 作为值堆叠 SUBMITTER。

尝试遵循堆叠条的其他示例，但所有这些都是关于 v3 的。我是 D3 的新手，所以我决定从一开始就从 v4 开始。但是网上的例子太少了。

也许您有更多示例（链接）如何使用 D3 v4（堆叠条）？

附言还发布到谷歌问题（由于我的声誉，无法提供链接）

【问题讨论】：

标签： d3.js

【解决方案1】：

我也有同样的问题。似乎新的 d3.stack v4 期望您的数据是：

date | apples| oranges| feijoas
-----|-------|--------|-------
2015 | 10    | 20     | 30
2016 | 5     | 10     | 15

所以它似乎不适用于nest的输出

【讨论】：

如果您使用的是 csv 文件，则数据格式很好，但我正在使用 java 对象并将我的数据调整为他在此处显示的确切格式，layers 对象。 github.com/d3/d3-3.x-api-reference/blob/master/Stack-Layout.md。这很方便，因为堆叠的数据以"values" 的形式提供，但您也可以拥有其他属性，例如"name"、"id" 或 w/e，然后在选择期间您可以访问这些属性。我不确定如何使我现有的数据格式适应版本 4 所期望的格式...