Question

I have a table that has different rows. Every row is a different data set.
I have an on click event attached to the rows that gives an extra chart when you click on the specific row.

But it only works the first time. After you first click on a specific row that data is shown in the chart, but if you click on another row the chart doesn’t change.

Here is some of my code:

    var chart = d3.select("body").append("svg")
          .attr("class", "chart")
          .attr("width", w * 24)
          .attr("height", h);

//saturday
var saturday = d3.select(".saturday")
        .selectAll("td")
        .data(d3.values(twitterDays[5][5]))
          .enter()
          .append("td")
          .attr("class", function(d) { return "hour h" + color(d); });

d3.select(".saturday").on("click", function() {
              chart.selectAll("rect")
                   .data(d3.values(twitterDays[5][5]))
                 .enter().append("rect")
                   .attr("x", function(d, i) { return x(i) - .5; })
                   .attr("y", function(d) { return h - y(d) - .5; })
                   .attr("width", w)
                   .attr("height", function(d) { return y(d); })

              chart.append("line")
                   .attr("x1", 0)
                   .attr("x2", w * d3.values(twitterDays[5][5]).length)
                   .attr("y1", h - .5)
                   .attr("y2", h - .5)
                   .style("stroke", "#000");
            });

//sunday
var sunday = d3.select(".sunday")
        .selectAll("td")
        .data(d3.values(twitterDays[6][6]))
          .enter()
          .append("td")
          .attr("class", function(d) { return "hour h" + color(d); });         

d3.select(".sunday").on("click", function() {
            chart.selectAll("rect")
                 .data(d3.values(twitterDays[6][6]))
               .enter().append("rect")
                 .attr("x", function(d, i) { return x(i) - .5; })
                 .attr("y", function(d) { return h - y(d) - .5; })
                 .attr("width", w)
                 .attr("height", function(d) { return y(d); })

            chart.append("line")
                 .attr("x1", 0)
                 .attr("x2", w * d3.values(twitterDays[6][6]).length)
                 .attr("y1", h - .5)
                 .attr("y2", h - .5)
                 .style("stroke", "#000");
          });

Answer 1

Your are only taking care of the so-called enter selection; meaning only the creation but not the update or removal of the rects is implemented in your code.

See the General Update Pattern: General Update Pattern, I

  // DATA JOIN
  // Join new data with old elements, if any.
  var text = svg.selectAll("text")
      .data(data);

  // UPDATE
  // Update old elements as needed.
  text.attr("class", "update");

  // ENTER
  // Create new elements as needed.
  text.enter().append("text")
      .attr("class", "enter")
      .attr("x", function(d, i) { return i * 32; })
      .attr("dy", ".35em");

  // ENTER + UPDATE
  // Appending to the enter selection expands the update selection to include
  // entering elements; so, operations on the update selection after appending to
  // the enter selection will apply to both entering and updating nodes.
  text.text(function(d) { return d; });

  // EXIT
  // Remove old elements as needed.
  text.exit().remove();
}

Make sure to have a look at Mike’s Thinking with Joins.