CODEWITHSUNDEEP
javascriptd3.js
some_name
some_name

Reputation: 399

Interactive update does not work in heatmap

I have followed this example: http://bl.ocks.org/tjdecke/5558084, and got it to work for all of my data - but I have created a dropdown menu, that makes it possible to select certain weeks, instead of just seeing the sum for all weeks.

The problem is in the interactive updating of the calender - The colors do not change, and when console.logging the variable "cards" it is empty. Additionally, the legend does update, but it just writes the new numbers on top of the old ones.

I can see that the dates from the proper weeks are given to the function, so I can't figure out where the problem is - maybe it has something to do with the exit() and remove() functions?

My code can be found here: http://blockbuilder.org/Skov94/e44fcebd282fe5eb4c708e8ba0af95d6

Upvotes: 2

Views: 239

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

Do not remove elements only to re-append them in a D3 code, as suggested in the comments: this is not the idiomatic solution, it's a slow and ineffective workaround and it can make things way harder further in the code. This is what I call a lazy update.

Instead of that, use proper enter/update/exit selections. Here is a refactor of your code, in which I'm purposely avoiding merge(), which is difficult to understand at first, hence some code duplication.

Here it is, this is the update selection:

var cards = svg_sum.selectAll(".hour")
    .data(flatList);

Now comes the exit selection:

cards.exit().remove();

Then, you have the enter selection, with the transition:

cards.enter().append("rect")
    .attr("x", function(d, i) {
        return (d.hour) * gridSize;
    })
    .attr("y", function(d) {
        return (d.day - 1) * gridSize;
    })
    .attr("rx", 4)
    .attr("ry", 4)
    .attr("class", "hour bordered")
    .attr("width", gridSize)
    .attr("height", gridSize)
    .style("fill", colors[0])
    .transition().duration(1000)
    .style("fill", function(d) {
        return colorScale_sum(d.value);
    });

And, again, the same transition for the update selection.

cards.transition().duration(1000)
    .style("fill", function(d) {
        return colorScale_sum(d.value);
    });

As I said, you can avoid that repetition using merge(). Things are more complicated regarding the legend, since you have groups there (have a look at my fork to see the selections).

Here is your updated bl.ocks: http://bl.ocks.org/GerardoFurtado/d938a52519b4701704137e8c8e6c826d/bacf8134a81c37e977094fe80afd6c12866b7c58

Upvotes: 2

Related Questions