Javascript D3.js交互式图例切换

我有一个用嵌套数据制作的折线图。用户可以选择要绘制的关键点。每个键值都有4个子值与其关联。每个键都有相同的子值名称。每个子值都有自己的行。因此，如果用户选择2个要绘制的关键点，图形上将显示8条线。一把钥匙4把，另一把钥匙4把

我已经做了一个图例，将显示孩子的名字和它的线模式。我希望能够在图例中单击子值的名称，并且所有具有该名称的子值都将被隐藏，即使它们具有不同的键

以下是我的嵌套方式：

var servers = d3.nest()
    .key(function (d) { return d.serverName; })
    .entries(data)

我如何定义行：

var lineGen = d3.svg.line()
.x(function (d) {
    return x(timeFormat.parse(d.metricDate));
})
.y(function (d) {
    return y(d.ServerLogon);
})
.interpolate("linear")


var lineGen2 = d3.svg.line()
.x(function (d) {
    return x(timeFormat.parse(d.metricDate));
})
.y(function (d) {
    return y1(d.Processor);
})
.interpolate("linear");


var lineGen3 = d3.svg.line()
.x(function (d) {
    return x(timeFormat.parse(d.metricDate));
})
.y(function (d) {
    return y2(d.AdminLogon);
})
.interpolate("linear");


var lineGen4 = d3.svg.line()
.x(function (d) {
    return x(timeFormat.parse(d.metricDate));
})
.y(function (d) {
    return y3(d.ServerExport);
})
.interpolate("linear");

如何为图例添加线条、文字和线型：

servers.forEach(function (d, i) {
    visObjectLoc.append("svg:path")
        .attr("class", "line")
        .attr("fill", "none")
        .attr("stroke-dasharray", ("15, 3"))
        .attr("d", lineGen2(d.values))
        .attr("id", "Processor")
        .style("stroke", function () {
            return d.color = color(d.key);
        });


    visObjectLoc.append("text")
    .attr("x", WIDTH / 4)
    .attr("y", 34)
    .style("text-anchor", "middle")
    .style("font-size", "18px")
    .text("Processor")
    .on("click", function () {
        var active = d.active ? false : true,
        newOpacity = active ? 0 : 1;
        d3.select("#Processor")
            .transition().duration(100)
            .style("opacity", newOpacity);
        d.active = active;
    });

    visObjectLoc.append("line")
        .attr("x1", 455)
        .attr("x2", 370)
        .attr("y1", 44)
        .attr("y2", 44)
        .attr("stroke-width", 2)
        .attr("stroke", "black")
        .attr("stroke-dasharray", ("15, 3"))
});

---

到目前为止，onclick仅隐藏第一个关键点的子行。我试着给每台服务器的每一个子行提供相同的ID。我想我没有正确地循环使用密钥，或者可能每一行都没有得到它需要的ID。欢迎提出任何建议，并表示感谢

ID是唯一的。如果你想选择一组东西，给它们一个类。如果您可以将项目放在JSFIDLE中，我可以对其进行测试，但这可能很简单，只需通过以下方式更改

servers.forEach（…

中的行即可：

.attr("id", "Processor")

到

然后在onClick回调中：

d3.selectAll(".Processor")
        .transition().duration(100)
        .style("opacity", newOpacity);
        ...

---

您将无法运行它，因为我是如何拉入数据的。另外，在使用inspect元素后，我可以看到所选第一个键的唯一子值都具有不透明度属性。我只是不知道如何为每个子项赋予属性。@Crashley Ok，所以为了澄清，即使您切换到使用类，也只需单击“图例”按钮即可设置第一个子项的不透明度？是的，您是正确的。以下子项甚至没有不透明度属性d3。需要选择All

d3.selectAll(".Processor")
        .transition().duration(100)
        .style("opacity", newOpacity);
        ...