Javascript 使用2个数据集将数据打印到折线图

我试图创造一些大致相同的东西-

目前，我的代码生成了如下内容-

虽然粗糙而简单，但却能达到其目的，并且可以在以后进行整理。我遇到的问题是绘制数据。我见过多个使用d3.svg.line（）的示例，但似乎都使用一个数据集

负责轴的代码为-

D3轴示例
var margin={top:100，right:100，bottom:100，left:100}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
变量条件=['条件1'、'条件2'、'条件3'、'条件4'、'条件6'、'条件7'、'条件8'、'条件9'、'条件10']
变量频率=[3000,21,70,10,20,19,18,34,2]
var x=d3.scale.ordinal（）
.域名（条件）
.范围点（[0，宽度]）；
变量y=d3.scale.linear（）.域（[0，d3.max（频率）]）.范围（[height，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yaxisleet=d3.svg.axis（）
.比例（y）
.滴答声（4）
.东方（“左”）；
//创建线
var line=d3.svg.line（）
.x（函数（d，i）{
返回x（i）；
})
.y（函数（d）{
返回y（d）；
})
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“变换”、“平移”（+margin.left+）、“+（height+25）+”）；
svg.append（“g”）
.attr（“类”、“xaxis”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.attr（“变换”、“平移（0，-300）”）
.呼叫（左）；
svg.selectAll（“.xaxis text”）//选择xaxis的所有文本元素
.attr（“转换”，函数（d）{
返回“translate（“+this.getBBox（）.height*-2+”，“+this.getBBox（）.height+”）旋转（-45）”；
})
.attr（'y'，'50'）
.attr（'x'，'-50'）
svg.append（“path”）.attr（“d”，行（频率））；

行生成器内匿名函数中的第一个参数（

d

）是指传递给该函数的数据数组的数据。但是，第二个参数（

i

）只是索引，当然，无论使用什么数组，它都是相同的

因此，解决方案是使用这些索引来获得第二个数组的值：

var line = d3.svg.line()
    .x(function(d, i) {
        return x(conditions[i]);
    //data array------^
    })
    .y(function(d) {
        return y(d);
    })

请记住，要使其起作用，必须确定两个数组中元素的顺序

以下是您的更新代码：

var保证金={
前20名，
右:20,，
底数：100，
左：40
},
宽度=800-边距.左-边距.右，
高度=500-margin.top-margin.bottom；
变量条件=['条件1'，条件2'，条件3'，条件4'，条件6'，条件7'，条件8'，条件9'，条件10']
变量频率=[3000,21,70,10,20,19,18,34,2]
var x=d3.scale.ordinal（）
.域名（条件）
.范围点（[margin.left，width]）；
变量y=d3.scale.linear（）.域（[0，d3.max（频率）]）.范围（[height，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yaxisleet=d3.svg.axis（）
.比例（y）
.滴答声（4）
.东方（“左”）；
//创建线
var line=d3.svg.line（）
.x（功能（d，i）{
返回x（条件[i]）；
})
.y（功能（d）{
返回y（d）；
})
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“g”）
.attr（“类”、“xaxis”）
.attr（“变换”、“平移（0）”+（高度）+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“亚克斯”）
.attr（“变换”、“平移”（+margin.left+”，0））
.呼叫（左）；
svg.selectAll（“.xaxis text”）//选择xaxis的所有文本元素
.attr（“转换”，函数（d）{
返回“translate（“+this.getBBox（）.height*-2+”，“+this.getBBox（）.height+”）旋转（-45）”；
})
.attr（'y'，'10'）
.attr（'x'，'-10'）
svg.append（“path”）.attr（“d”，行（频率））
.attr（“填充”、“无”）
.attr（“笔划”、“橙色”）
.xaxis行，
.xaxis路径，
.亚克西斯线，
.雅克西斯路{
填充：无；
笔画：黑色；
}
请不要复制代码的屏幕截图。。。复制你的代码。例如，我已经有了一个解决方案，但是当我可以简单地复制/粘贴它时，我不会重新编写您的所有代码，您看到了吗？顺便说一句，从技术上讲，这不是一个折线图（在x轴上有分类变量）。@GerardoFurtado，抱歉！，是的，我意识到这有点奇怪，只是为了实验。我已经把代码贴在上面了。谢谢，现在好多了。