Javascript 功能/变量名称不同的d3多折线图

是我的项目的当前状态

我有以下格式的按国家和年份嵌套的数据：

 nestedData = [{"country": "england", 
                "values": [{"year": 1888,
                            "feature1": "someValue",
                            "feature2": "someValue"},
                           {"year": 1989,
                            "feature1": "someValue",
                            "feature2": "someValue"}]
               },
               {"country": "germany", 
                "values": [{"year": 1900,
                            "feature1": "someValue",
                            "feature2": "someValue"},
                           {"year": 1991,
                            "feature1": "someValue",
                            "feature2": "someValue"}]
               }]

用户可以从下拉菜单中选择国家/地区。目前，我将所选国家的数据及其索引（在

nestedData

中）存储在全局变量中：

var selectedIndex = 0  // default value
var countryData = data[selectedIndex].values

对于特定特征（此处：特征1），我创建了一条线，其中包含：

var line = d3.svg.line()
    .x(function(d) { return xScale(d.year); })
    .y(function(d) { return yScale(d.feature1); });

d3.select("#viz1")
    .append("path")
    .data([countryData])
    .attr("class", "line")
    .attr("id", "feature1")
    .attr("d", line);

此外，我的可视化还包括表示功能的复选框。单击这些复选框将触发同一图形中的其他行

问题 现在我的问题是，我不知道如何编程，点击复选框会以一种通用的方式产生额外的行。我试图将单击的功能的名称传递到

d3.svg.line（）

，这样我就可以按照以下方式进行操作：

.y（函数（d）{返回yScale（d.featureName）；}）但是我找不到一个方法来完成这个

另一个想法是，每次单击复选框时，将数据重新排列为以下形式：

rearrangedData = [{"year": 1888, "value": "someValue"},
                  {"year": 1989, "value": "someValue"}, ...]
// value now stands for the selected feature, e.g. feature1

现在是代码段
.y（函数（d）{returnyscale（d.value）；}）可用于任何应绘制的特征。但我怀疑这是解决这个问题的有效方法

我将非常感谢您的帮助和任何关于如何改进我的代码的建议。不过，请对我放松点，因为我两周前开始使用D3。将线路功能定义为：

var line = d3.line()
    .curve(d3.curveBasis)
    .x(function(d) {
      return x(d.year);
    });

注意，没有
.y
访问器

设置函数：

function drawLine(whichFeature){

    // set up .y on each call
    line.y(function(d) {
      return y(d[whichFeature]);
    });

    plot.append("path")
      .attr("class", "line")
      .attr("d", function(d) {
        return line(d.values);
      })
      .style("stroke", function(d){
        return z(d.country);
      })
  }

并称之为：

drawLine("feature1");
drawLine("feature2");


完整代码：



.线路{
填充：无；
笔画：钢蓝；
笔划宽度：1.5px；
}
var svg=d3。选择（“svg”），
保证金={
前20名，
右:80,，
底部：80，
左：50
},
宽度=svg.attr（“宽度”）-margin.left-margin.right，
高度=svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
var parseTime=d3.timeParse（“%Y%m%d”）；
var x=d3.scaleOrdinal（）.range（[0，宽度]），
y=d3.scaleLinear（）.range（[height，0]），
z=d3.scaleOrdinal（d3.schemeCategory 10）；
var line=d3.line（）
.曲线（d3.曲线基）
.x（功能（d）{
回报x（d.年）；
});
嵌套数据=[{
“国家”：“英格兰”，
“价值观”：[{
“年”：1888年，
“特征1”：10，
“特色2”：20
}, {
“年份”：1989年，
“特点1”：15，
“特色2”：35
}]
}, {
“国家”：“德国”，
“价值观”：[{
“年份”：1900年，
“特点1”：21，
“特色2”：36
}, {
“年份”：1991年，
“特征1”：12，
“特色2”：25
}]
}]
x、 域（d3.map）（嵌套数据，函数（d）{
返回d.year；
}));
y、 领域([
d3.min（嵌套数据，函数（c）{
返回d3.min（c.值，函数（d）{
返回Math.min（d.feature1，d.feature2）；
});
}),
d3.max（嵌套数据，函数（c）{
返回d3.最大值（c.值，函数（d）{
返回Math.max（d.feature1，d.feature2）；
});
})
]);
g、 附加（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
g、 附加（“g”）
.attr（“类”、“轴--y”）
.呼叫（d3.左（y））
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“0.71em”）
.attr（“填充”和“#000”）；
变量绘图=g.selectAll（“.plot”）
.数据（嵌套数据）
.enter（）.append（“g”）；
抽绳（“特征1”）；
抽绳（“特征2”）；
功能抽绳（whichFeature）{
第y行（功能（d）{
返回y（d[其特征]）；
});
plot.append（“路径”）
.attr（“类”、“行”）
.attr（“d”，函数（d）{
返回线（d值）；
})
.样式（“笔划”，功能（d）{
返回z（d.国家）；
})
}
这可能有助于将功能作为变量传递，
passedFeatureName
，然后
.y（函数（d）{return yScale（d[passedFeatureName]；}）；
谢谢您的建议。@标记如何将
passedFeature
准确传递到行中？