javascript - D3.js 交互式图例切换

Question

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

我制作了一个图例来显示 child 的名字和它的线条图案。我希望能够单击图例中子值的名称，并且所有具有该名称的子值都将被隐藏，即使它们具有不同的键也是如此。

这是我嵌套的方式:

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"))
});

到目前为止，onClicks 仅隐藏了第一个键的子行。我试过为每个服务器的每个子行提供相同的 ID。我在想我没有正确地循环键，或者每一行都没有得到它需要的 ID。欢迎和赞赏任何建议。

Answer 1

ID 是唯一的。如果你想选择一组东西，给他们一个类。如果您可以将项目放在 JSFiddle 中，我可以对其进行测试，但它可能就像按以下方式更改 servers.forEach(... 中的行一样简单:

.attr("id", "Processor")

到

.attr("class", "Processor")

然后在 onClick 回调中:

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