Javascript 使用d3.entries键值对绘制多个折线图

我想使用d3.js绘制一个多折线图。我在控制台中打印我的数据结构，它如下所示：

0:
  key: student1
  value: Array(50)
       0: {date : 2017-09-11 11:51,score:50}
       1: {date : 2017-09-11 12:53,score:90}
       ...

0:
  key: student2
  value: Array(50)
       0: {date : 2017-09-11 11:51,score:20}
       1: {date : 2017-09-11 12:53,score:30}
       ...

data = [
    {student: 'student1', date : '2017-09-11 11:51', score: 50},
    {student: 'student1', date : '2017-09-11 12:53', score: 90},
    ...
    {student: 'student2', date : '2017-09-11 11:51', score: 20},
    {student: 'student2', date : '2017-09-11 12:53', score: 30},
    ...
]

var parseDate = d3.timeParse("%Y-%m-%d %H:%M");
var x = d3.scaleTime().range([0, width]);  
var y = d3.scaleLinear().range([height, 0]);

data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.score = +d.score;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.score; })]);

把所有学生放在同一张图表中，用不同的线表示。X轴是日期，Y轴是学生成绩

---

但似乎我在定义我的X和Y域时遇到了问题，我无法通过d.value.date获得日期和分数值。

你不能通过说

d.value.date来获得
date
和
value
分数，因为这些值嵌套在另一个对象中。您可以展平这些对象以尝试获取域。离开，如果你这样描述你的结构：

0:
  key: student1
  value: Array(50)
       0: {date : 2017-09-11 11:51,score:50}
       1: {date : 2017-09-11 12:53,score:90}
       ...

0:
  key: student2
  value: Array(50)
       0: {date : 2017-09-11 11:51,score:20}
       1: {date : 2017-09-11 12:53,score:30}
       ...

data = [
    {student: 'student1', date : '2017-09-11 11:51', score: 50},
    {student: 'student1', date : '2017-09-11 12:53', score: 90},
    ...
    {student: 'student2', date : '2017-09-11 11:51', score: 20},
    {student: 'student2', date : '2017-09-11 12:53', score: 30},
    ...
]

var parseDate = d3.timeParse("%Y-%m-%d %H:%M");
var x = d3.scaleTime().range([0, width]);  
var y = d3.scaleLinear().range([height, 0]);

data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.score = +d.score;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.score; })]);

您可以尝试这样定义轴：

0:
  key: student1
  value: Array(50)
       0: {date : 2017-09-11 11:51,score:50}
       1: {date : 2017-09-11 12:53,score:90}
       ...

0:
  key: student2
  value: Array(50)
       0: {date : 2017-09-11 11:51,score:20}
       1: {date : 2017-09-11 12:53,score:30}
       ...

data = [
    {student: 'student1', date : '2017-09-11 11:51', score: 50},
    {student: 'student1', date : '2017-09-11 12:53', score: 90},
    ...
    {student: 'student2', date : '2017-09-11 11:51', score: 20},
    {student: 'student2', date : '2017-09-11 12:53', score: 30},
    ...
]

var parseDate = d3.timeParse("%Y-%m-%d %H:%M");
var x = d3.scaleTime().range([0, width]);  
var y = d3.scaleLinear().range([height, 0]);

data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.score = +d.score;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.score; })]);

我对d3noob的示例进行了一些修改，以配合这些数据（添加了更多的数据点）：


//设置画布/图形的尺寸
var保证金={
前30名，
右:20,，
底数：70，
左：50
},
宽度=600-边距。左侧-边距。右侧，
高度=300-margin.top-margin.bottom；
//解析日期/时间
var parseDate=d3.timeParse（“%Y-%m-%d%H:%m”）；
//设定范围
var x=d3.scaleTime（）.range（[0，width]）；
变量y=d3.scaleLinear（）.range（[height，0]）；
//界定界线
var priceline=d3.line（）
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y（d.score）；
});
//添加svg画布
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//获取数据
风险值数据=[
{
学生：“学生1”，
日期：“2017-09-11 11:45”，
分数：60
},
{
学生：“学生1”，
日期：“2017-09-11 11:51”，
分数：50
},
{
学生：“学生1”，
日期：“2017-09-11 12:53”，
分数：90
},
{
学生：“学生1”，
日期：“2017-09-11 12:57”，
分数：97
},
{
学生：“学生2”，
日期：“2017-09-11 11:22”，
分数：10
},
{
学生：“学生2”，
日期：“2017-09-11 11:31”，
分数：15
},
{
学生：“学生2”，
日期：“2017-09-11 11:33”，
分数：20
},
{
学生：“学生2”，
日期：“2017-09-11 11:38”，
分数：30
},
{
学生：“学生2”，
日期：“2017-09-11 12:51”，
分数：45
},
{
学生：“学生2”，
日期：“2017-09-11 12:59”，
分数：40
}
]
data.forEach（函数（d）{
d、 日期=解析日期（d.date）；
d、 价格=+d.价格；
});
//缩放数据的范围
x、 域（d3）。范围（数据，函数（d）{
返回日期；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回d.score；
})]);
//按符号嵌套条目
var dataNest=d3.nest（）
.键（功能（d）{
返回博士生；
})
.条目（数据）；
//设置颜色比例
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
legendSpace=width/dataNest.length；//图例的间距
//循环遍历每个符号/键
forEach（函数（d，i）{
追加（“路径”）
.attr（“类”、“行”）
.style（“stroke”，function（）{//动态添加颜色
返回d.color=color（d.key）；
})
.attr（“id”，“tag'+d.key.replace（/\s+/g'，）//分配一个id
.attr（“d”，价格线（d.values））；
//添加图例
svg.append（“文本”）
.attr（“x”，（legendSpace/2）+i*legendSpace）//空间图例
.attr（“y”，高度+（下边距/2）+5）
.attr（“类”、“图例”）//设置图例的样式
.style（“fill”，function（）{//动态添加颜色
返回d.color=color（d.key）；
})
.on（“单击”，函数（）{
//确定当前行是否可见
var active=d.active？错误：正确，
newOpacity=active？0:1；
//根据ID隐藏或显示元素
d3.选择（“#tag”+d.key.replace（/\s+//g，”））
.transition（）.持续时间（100）
.style（“不透明度”，newOpacity）；
//更新元素是否处于活动状态
d、 主动=主动；
})
.文本（d.key）；
});
//添加X轴
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加Y轴
svg.append（“g”）
.attr（“类”、“轴”）
.调用（d3.左（y））
body{font:12px Arial；}
路径{
笔画：钢蓝；
笔画宽度：2；
填充：无；
}
.轴线路径，
.轴线{
填充：无；
笔画：灰色；
笔画宽度：1；
形状渲染：边缘清晰；
}
.传奇{
字体大小：16px；
字体大小：粗体；
文本锚定：中间；
}
请共享一个工作片段以进行检查