处理没有标识符的JSON数据

我是D3和javascript的新手，所以如果这很明显，我很抱歉。我有一组数据在Flot中工作，但我似乎无法在d3中识别它，它是没有标识符的json。如处理没有标识符的JSON数据

{ 
"dataLine": [ [134, 43.39], [144, 45.34], [154, 47.45], [164, 48.25], [174, 48.14], [184, 48.21], [194, 47.64], [204, 47.58], [214, 52.18], [224, 58.18], [234, 53.19], [244, 61.28], [254, 56.50], [264, 53.92], [274, 57.27], [284, 58.73], [294, 57.28], [304, 52.91], [314, 55.07], [324, 60.58], [334, 61.16], [344, 62.64], [354, 60.39], [364, 62.79], [372, 65.24] ] 
}

我可以，如果我每个条目前面加上了“X”和“Y”标签中的数据的工作，但我会如何处理数据，而标签？假设第一个条目是“x”，第二个条目是“y”。我目前正在使用的代码是

d3.json('3.json', function (data) 
{ 
data.forEach(function(d) 
{ 
    d.x = d.x; 
    d.y = d.y; 
}); 

x.domain(d3.extent(data, function(d) { return d.x; })); 
y.domain([0,d3.max(data, function(d) { return d.y; })]); 

svg.append("path") 
    .datum(data) 
    .attr("class", "area") 
    .attr("d", area); 
    //.attr("d", valueline); 


svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
.append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("Force (N)"); 
});

而且数据看起来像

[ 
    {"x":134, "y":43.39}, {"x":144, "y":45.34}, {"x":154, "y":47.45}, {"x":164,"y":48.25}, {"x":174, "y":48.14}, {"x":184, "y":48.21}, {"x":194, "y":47.64}, {"x":204, "y":47.58}, {"x":214, "y":52.18}, {"x":224, "y":58.18}, {"x":234, "y":53.19}, {"x":244, "y":61.28}, {"x":254, "y":56.50}, {"x":264, "y":53.92}, {"x":274, "y":57.27}, {"x":284, "y":58.73}, {"x":294, "y":57.28}, {"x":304, "y":52.91}, {"x":314, "y":55.07}, {"x":324, "y":60.58}, {"x":334, "y":61.16}, {"x":344, "y":62.64}, {"x":354, "y":60.39}, {"x":364, "y":62.79}, {"x":372, "y":65.24} 
]

我可以绘制它像这样，但我所有的历史数据，就像是第一个例子，我知道我做错了什么因为我现在正在盲目地跟随教程和示例，并且非常感谢任何帮助或提示。为了简单起见，有没有办法绘制我发布的第一组数据？如果是，那么让我进一步考虑一下，我如何绘制条目“dataLine”，并在同一个json文件中还有5个其他条目进行图形化，这些条目的格式相同但标签不同？

来源

2015-11-18 Ralre

你能从它做一个jsfiddle？我认为更正这种方式更容易。 – Peter

对于第一个问题，不需要重新格式化数据。 d3提供accessor functions以不同格式获取数据。在你的情况下，数组的数组，你需要：

var valueline = d3.svg.line() 
    .x(function(d) { 
     return d[0]; // this really should be x(d[0]) when you properly use scales 
    }) 
    .y(function(d) { 
     return d[1]; // this really should be y(d[0]) when you properly use scales 
    })

而且你会绑定到：

svg.append("path") 
    .datum(data.valueLine);

你的第二个问题是有点难度。为此，您正在使用subselection。假设您的数据为：

var data = { 
    "dataLine1": [ 
     [134, 43.39], 
     [144, 45.34], 
     ... 
    ], 
    "dataLine2": [ 
     [224, 58.18], 
     [234, 53.19], 
     ... 
    ], 
    "dataLine3": [ 
     [324, 60.58], 
     [334, 61.16], 
     ... 
    ] 
    };

而且您需要为每个dataLine设置一行。首先绑定您的数据，每一行：

var myLines = svg.selectAll("line") 
    .data(d3.values(data)) // get me an array of 3 arrays 
    .enter() 
    .append("g") 
    .attr("class", "line");

然后创建子选择创建的每个路径：

myLines.append("path") 
    .datum(function(d){ 
     return d; // just return me the array! 
    }) 
    .attr("class", "area") 
    .attr("d", valueline) // using the accessor functions above 
    .style("fill", "none") 
    .style("stroke",function(d,i,j){ 
     return color(i); 
    });

这里的一些工作代码：

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <script> 
 

 
     var svg = d3.select('body') 
 
     .append('svg') 
 
     .attr('width', 500) 
 
     .attr('height', 500); 
 

 
     var data = { 
 
     "dataLine1": [ 
 
      [134, 43.39], 
 
      [144, 45.34], 
 
      [154, 47.45], 
 
      [164, 48.25], 
 
      [174, 48.14], 
 
      [184, 48.21], 
 
      [194, 47.64], 
 
      [204, 47.58], 
 
      [214, 52.18] 
 
     ], 
 
     "dataLine2": [ 
 
      [224, 58.18], 
 
      [234, 53.19], 
 
      [244, 61.28], 
 
      [254, 56.50], 
 
      [264, 53.92], 
 
      [274, 57.27], 
 
      [284, 58.73], 
 
      [294, 57.28], 
 
      [304, 52.91], 
 
      [314, 55.07] 
 
     ], 
 
     "dataLine3": [ 
 
      [324, 60.58], 
 
      [334, 61.16], 
 
      [344, 62.64], 
 
      [354, 60.39], 
 
      [364, 62.79], 
 
      [372, 65.24] 
 
     ] 
 
     }; 
 
     
 
     var color = d3.scale.category10(); 
 
     
 
     var valueline = d3.svg.line() 
 
     .x(function(d) { 
 
      return d[0]; 
 
     }) 
 
     .y(function(d) { 
 
      return d[1]; 
 
     }); 
 

 
     var myLines = svg.selectAll("line") 
 
     .data(d3.values(data)) 
 
     .enter() 
 
     .append("g") 
 
     .attr("class", "line"); 
 
     
 
     myLines.append("path") 
 
     .datum(function(d){ 
 
      return d; 
 
     }) 
 
     .attr("class", "area") 
 
     .attr("d", valueline) 
 
     .style("fill", "none") 
 
     .style("stroke",function(d,i,j){ 
 
      return color(i); 
 
     }); 
 

 
    </script> 
 
    </body> 
 

 
</html>

来源

2015-11-18 17:11:11 Mark

想要尝试一下，我会尽快回复，感谢帮助！我一直在疯狂:) – Ralre

非常感谢！我已经设法在我的代码中使用它，尽管我必须弄清楚格式和缩放比例，我相信我可以弄明白！再次，谢谢！ – Ralre

处理没有标识符的JSON数据

回答

相关问题