Question

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

我做了以下示例，它很好 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和堆叠的SUBMITTER上使用distr_count作为值。

试图效仿堆叠条的其他例子，但他们都是关于v3的。我是D3的新手，所以我决定从头开始使用v4。但网上的例子太少了。

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

P.S。还发布了谷歌问题（由于我的声誉，无法提供链接）

Answer 1

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

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

所以它似乎不能使用nest

的输出

d3.js-v4堆积条形图

1 个答案: