Question

我正在使用D3＆amp; 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轴上时间戳的困难，但我希望当我单独显示这些条形时，这个问题将被修复（或易于修复）。

任何帮助表示赞赏！对不起，很长的帖子！

UPDATE /溶液 感谢@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]);

Answer 1

如果有人遇到同样的问题，我在这里有一个完整的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]);

这是所有代码的Pastebin：http://pastebin.com/mEPcrFbB

NVD3 - 图表修改后的JSON数据无法正常显示

1 个答案: