NVD3-获取修改的JSON数据的图形未正确显示

我正在与D3&NVD3从API中提取的数据创建图形。数据以以下格式返回:

[ 
  {
"id": 1,
"timestamp": "2014-01-01T02:05:54",
"value": 10000,
"ctclip_id": 1
 },

 {
"id": 1,
"timestamp": "2015-01-01T02:05:54",
"value": 12000,
"ctclip_id": 1
 },

 {
"id": 1,
"timestamp": "2016-01-01T02:05:54",
"value": 9000,
"ctclip_id": 1
 },

 {
"id": 2,
"timestamp": "2015-01-01T02:05:54",
"value": 4500,
"ctclip_id": 1
 },

{
"id": 3,
"timestamp": "2016-01-01T02:05:54",
"value": 100,
"ctclip_id": 2
 },

 {
"id": 4,
"timestamp": "2017-01-01T02:05:54",
"value": 200,
"ctclip_id": 2
 }

]

我使用了D3.nest功能和一些硬编码:

var newData = d3.nest()
.key(function(d,i){ return d.id; })
.entries(data);

newData[0]['bar']=true;
newData[1]['bar']=true;
newData[2]['bar']=true;
newData[3]['bar']=true;

这将JSON格式更改为:

[
{
"key":"1",
"values":
[
    {"id":1,"timestamp":"2014-01-01T02:05:54","value":10000,"ctclip_id":1},
    {"id":1,"timestamp":"2015-01-01T02:05:54","value":12000,"ctclip_id":1},
    {"id":1,"timestamp":"2016-01-01T02:05:54","value":9000,"ctclip_id":1}
],
"bar":true},

{
"key":"2",
"values":
[
    {"id":2,"timestamp":"2015-01-01T02:05:54","value":4500,"ctclip_id":1}
],
"bar":true},

{
"key":"3",
"values":
[
    {"id":3,"timestamp":"2016-01-01T02:05:54","value":100,"ctclip_id":2}
],
"bar":true
},
{
"key":"4",
"values":
[
    {"id":4,"timestamp":"2017-01-01T02:05:54","value":200,"ctclip_id":2}
],
"bar":true}

]

我试图绘制数据,但ID 1的条形图彼此重叠。只能通过隐藏ID 1(或其他ID)来查看其他ID的条形图数据。下面是我遇到的问题的JSFiddle: http://jsfiddle.net/emjaycub/7N4Ma/1/

我在Y轴上的时间戳也遇到了困难,但我希望当我得到单独显示的条形图时,这个问题会得到解决(或很容易解决)。

感谢任何帮助!抱歉发了这么长的帖子!

更新/解决方案: 多亏了@ameliabr,我找到了解决方案。如果有人有同样的问题,我这里有一个完整的JSFiddle- http://jsfiddle.net/emjaycub/7N4Ma/7/ 。我使用了:

var newData = d3.nest()
.key(function(d,i){ return d.id; })
.entries(data);

newData[0]['bar']=true;

var newData2 = d3.nest()
.key(function(d,i){ return d.id; })
.entries(data2);

以将JSON数据格式化为与D3兼容。然后,解决这一切的一行是: newData.push(newData2[0]);