CODEWITHSUNDEEP
javascriptjqueryd3.js
CrashleyS
CrashleyS

Reputation: 121

D3.js Interactive Legend Toggling

I have a line graph I've made from nested data. The user can pick which keys will be graphed. Each key value has 4 child values associated with it. Every key has the same child value names. Each child value has it's own line. So, if the user picks 2 keys to be graphed, 8 lines will be on the graph. 4 for one key and 4 for the other.

I've made a legend that will display the child name and the pattern of it's line. I would like to be able to click the name of the child value in the legend and all child values with that name will be hidden, even if they have a different key.

Here is how I nested:

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

How I defined lines:

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

How I append lines, text and line pattern for legend:

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

So far, the onClicks are only hiding the first key's child line. I've tried giving each child line for each server the same ID. I'm thinking I'm not looping through the keys correctly or maybe each line isn't getting the ID it needs. Any suggestions are welcome and appreciated.

Upvotes: 1

Views: 1516

Answers (1)

Sam H.
Sam H.

Reputation: 4349

IDs are unique. If you want to select a group of things, give them a class. If you could put the project in a JSFiddle I could test it, but it might be as simple as changing the line in the servers.forEach(... in the following way:

.attr("id", "Processor")

to

.attr("class", "Processor")

and then in the onClick callback:

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

Upvotes: 2

Related Questions