复杂JSON到D3js堆叠时间序列

我必须用D3创建一个可视化，如下图所示，时间序列，堆叠条：

数据集来自一位顾问，其格式为json对象的嵌套数组：

[{
        "period": "6/2017",
        "data": [
            {
                "partner": "TR",
                "val": 5201888581
            },
            {
                "partner": "CH",
                "val": 8509470105
            },
            {
                "partner": "RU",
                "val": 10677690328
            },
            {
                "partner": "GB",
                "val": 16086915825
            },
            {
                "partner": "US",
                "val": 17817589838
            },
            {
                "partner": "CN",
                "val": 26120939253
            },
            {
                "partner": "TOTAL",
                "val": 145385348496
            }
        ]
    },
    {
        "period": "7/2017",
        "data": [
            {
                "partner": "TR",
                "val": 4832746886
            },
            {
                "partner": "CH",
                "val": 8194483975
            },
            {
                "partner": "RU",
                "val": 10082530447
            },
            {
                "partner": "US",
                "val": 15251181551
            },
            {
                "partner": "GB",
                "val": 15515343080
            },
            {
                "partner": "CN",
                "val": 27480148190
            },
            {
                "partner": "TOTAL",
                "val": 142118881451
            }
        ]
    },
    {
        "period": "8/2017",
        "data": [
            {
                "partner": "TR",
                "val": 4827335758
            },
            {
                "partner": "CH",
                "val": 7087004314
            },
            {
                "partner": "RU",
                "val": 10372167568
            },
            {
                "partner": "GB",
                "val": 14555013893
            },
            {
                "partner": "US",
                "val": 16838219917
            },
            {
                "partner": "CN",
                "val": 27876046083
            },
            {
                "partner": "TOTAL",
                "val": 143363806063
            }
        ]
    }
...
]

更准确地说，每个对象都包含时段和对象子数组、国家代码和值：

{ 
  period,
  data: [{country,value},{country,value},{country,value}...]
}

数据数组包含不同数量的对象国家记录，从3个到10个，不同的国家可以是任何联合国国家

我尝试使用D3 v5中的标准布局，如stack，但如您所见，我的数据与D3布局中所需的数据格式不匹配，即表格数据，如：

time  field1  field2  field3
t1     v11     v12     v13
t2     v21     v22     v23
...

我不知道如何管理我的数据，请帮助。德克萨斯州

---

LE：我也尝试过使用chart.js，但由于类似问题而失败。

随着国家数量的变化，您可以创建自己的函数来附加国家的rect元素。该示例使用d3.selection.each调用新函数，在该函数中，将使用每个rect的y偏移量创建一个新的数据数组

让数据=[{ 期限：2017年6月， 数据：[ { 合作伙伴：TR， val:5201888581 }, { 合作伙伴：CH， val:850947005 }, { 合作伙伴：RU， val:10677690328 }, { 合作伙伴：GB， val:16086915825 }, { 合作伙伴：美国， 瓦尔：17817589838 }, { 合作伙伴：中国， val:26120939253 }, { 合作伙伴：总计， val:145385348496 } ] }, { 期间：2017年7月， 数据：[ { 合作伙伴：TR， val:4832746886 }, { 合作伙伴：CH， val:8194483975 }, { 合作伙伴：RU， val:10082530447 }, { 合作伙伴：美国， val:15251181551 }, { 合作伙伴：GB， val:15515343080 }, { 合作伙伴：中国， val:27480148190 }, { 合作伙伴：总计， val:142118881451 } ] }, { 期限：2017年8月， 数据：[ { 合作伙伴：TR， val:4827335758 }, { 合作伙伴：CH， val:7087004314 }, { 合作伙伴：RU， val:10372167568 }, { 合作伙伴：GB， val:14555013893 }, { 合作伙伴：美国， 瓦尔：16838219917 }, { 合作伙伴：中国， val:27876046083 }, { 合作伙伴：总计， val:143363806063 } ] }] 宽度=500 让高度=500 让边距=50 设x=d3.缩放带 .域名[6/2017,7/2017,8/2017] .范围[0，宽度] .填充0.3 设y=d3.scaleLinear .domain[0，145385348496] .范围[高度，0] var svg=d3.selectbody.appendsvg .宽度，宽度+边距+边距 .attr高度，高度+边距+边距 var g=svg.appendg .attransform，translate+margin+，+margin+ var periods=g.selectAllg .数据 进来 .附录 .课程，句号 .attr转换，函数{ 返回translate+xd.period+，+0+ } .每个国家 函数appendCountriesperiod，i{ 让国家=[] 设偏移量=0 设颜色=d3.scaleOrdinald3.schemeacent； period.data.forEachfunctionc{ 如果c.partner！=TOTAL{//，则假定不应包括TOTAL 偏移量=偏移量+c.val 设obj={} 对象y=偏移量 obj.val=c.val obj.partner=c.partner 国家/地区 } } 让rects=d3.selectthis.selectAllrect .数据国家 进来 .appendrect .宽度，x.带宽 .attrx，0 .attry，d=>yd.y .attrheight，d=>height-yd.val .stylefill，d=>colordd.partner .白色 }

---

非常感谢，汤姆。你救了我一天