遍历 D3 图中的键/值以获取折线图答案

【问题标题】：Iterate through Key/Values in D3 graph for line chart遍历 D3 图中的键/值以获取折线图
【发布时间】：2015-09-26 21:37:56
【问题描述】：

这是一个非常简单的问题，但我似乎无法弄清楚。

我有一个巨大的 JSON（大约 50,000 行大），其中每个部分都包含一个 90% 的值、一个计时器名称和一些其他无用的数据。

我正在尝试用第 90 个百分位数制作图表，其中计时器名称相同。我使用this tutorial 中的代码将所有计时器名称分组。这是执行此操作的代码：

var dataGroup = d3.nest()
    .key(function(d){
        return d.timerName;
    })
    .entries(info);

所以现在 JSON 按键/值对分组，如下所示：

[{
   "key": "Timer1",
   "values": [{
       "timerName": "Timer1",
       "ninetieth": "202",
       "year": "2000"
   }, {
       "timerName": "Timer1",
       "ninetieth": "215",
       "year": "2002"
   }, {
       "timerName": "Timer1",
       "ninetieth": "179",
       "year": "2004"
   }, {
       "timerName": "Timer1",
       "ninetieth": "199",
       "year": "2006"
   }, {
       "timerName": "Timer1",
       "ninetieth": "134",
       "year": "2008"
   }, {
       "timerName": "Timer1",
       "ninetieth": "176",
       "year": "2010"
   }]
}, {
   "key": "Timer2",
   "values": [{
       "timerName": "Timer2",
       "ninetieth": "100",
       "year": "2000"
   }, {
       "timerName": "Timer2",
       "ninetieth": "215",
       "year": "2002"
   }, {
       "timerName": "Timer2",
       "ninetieth": "179",
       "year": "2004"
   }, {
       "timerName": "Timer2",
       "ninetieth": "199",
       "year": "2006"
   }, {
       "timerName": "Timer2",
       "ninetieth": "134",
       "year": "2008"
   }, {
       "timerName": "Timer2",
       "ninetieth": "176",
       "year": "2013"
  }]
}]

如果有意义的话，我只需要帮助弄清楚如何通过并为每个“键”制作单独的折线图。所以我需要一个 Timer1 的图表，折线图的值是名为“Timer1”的键下的所有 6 个“第 90 个”值。

如果有人可以提供帮助，那就太棒了！！！这是我到目前为止的代码（它创建了图表应该所在的框，包括刻度线和所有内容，但实际上没有线出现）：http://jsfiddle.net/fsx9o8c5/

【问题讨论】：

你想要mbostock.github.io/d3/talk/20111116/iris-parallel.html或bl.ocks.org/mbostock/3884955这样的东西吗？
@BrantOlsen 第一个链接不起作用，但第二个示例不太正确。我刚刚编辑了我的帖子以添加我需要的图片 - 虽然它不正确，因为它包含来自不同键值的所有行，但我只需要每个图表一行。
如果我的回答对你不起作用，你能更新你的小提琴吗？它给出了未定义 URLtoJSON 的错误。如果您可以对一些要使用的示例数据进行硬编码会有所帮助。
我删除了我的答案，因为您没有在任何函数中使用 a 变量，因此没有范围问题。您能否更新您的小提琴，以便它实际创建您所看到的六个图表。
@BrantOlsen 抱歉，我忘记在拍照之前添加了一条数据。这是更新的小提琴：jsfiddle.net/fsx9o8c5/2 感谢您帮助我！

标签： javascript json d3.js

【解决方案1】：

http://jsfiddle.net/fsx9o8c5/6/

我已经将你的小提琴更新为我相信你想要的。

主要变化是

dataGroup.forEach(function(d, i){
  graph.append('svg:path')
    .attr('d', line(d.values))
    .attr('stroke', 'blue')
    .attr('stroke-width', 2)
    .attr('fill', 'none');
});

到

graph.append('svg:path')
        .attr('d', line(data))
        .attr('stroke', 'blue')
        .attr('stroke-width', 2)
        .attr('fill', 'none');

因为您只想将当前数据附加到当前图表中。

【讨论】：

非常感谢！！我知道我很接近......你太棒了，布兰特，谢谢！