title: D3.js Interactive Legend Toggling
body: <p>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. </p>
  
  <p>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.  </p>
  
  <p>Here is how I nested:</p>
  
  <pre><code>var servers = d3.nest()
      .key(function (d) { return d.serverName; })
      .entries(data)
  </code></pre>
  
  <p>How I defined lines:</p>
  
  <pre><code>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");
  </code></pre>
  
  <p>How I append lines, text and line pattern for legend:</p>
  
  <pre><code>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"))
  });
  </code></pre>
  
  <p>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. </p>