NVD3 - Graph taking modified JSON data not displaying properly

Question

I am working with D3 & NVD3 to create graphs from data pulled from an API. The data is returned in the following format:

[ 
  {
"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
 }

]

I have used the D3.nest feature and some hardcoding:

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;

which changes the JSON format to:

[
{
"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}

]

I am trying to graph the data but the bars for ID 1 are overlapping each other. Bar data for other IDs can only be seen by hiding ID 1 (or other IDs). Here is a JSFiddle of what I'm having trouble with: http://jsfiddle.net/emjaycub/7N4Ma/1/

I'm also experiencing difficulty with the timestamp on the Y Axis but am hoping that when I get the bars displaying separately this issue will be fixed (or easy to fix).

Any help is appreciated! Sorry for the long post!

UPDATE/SOLUTION: Thanks to @ameliabr I found a solution. I have a completed JSFiddle here if anyone is having the same problem - http://jsfiddle.net/emjaycub/7N4Ma/7/ . I used:

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);

to format the JSON data to be compatible with D3. Then the one line that fixed it all was: newData.push(newData2[0]);

Answer 1

I have a completed JSFiddle here if anyone is having the same problem - http://jsfiddle.net/emjaycub/7N4Ma/7/ . I used:

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);

to format the JSON data to be compatible with D3. Then the one line that fixed it all was:

newData.push(newData2[0]);

Here's a Pastebin of all of the code: http://pastebin.com/mEPcrFbB