D3.js update Treemap dynamically

Question

i want to update a Treemap dynamicly with new Data. I have read this article but i do not bring it up and running. So this is my code:

function buildTreemap(jVals){
    //$("#treemap").empty();

    var data = jQuery.parseJSON(jVals);

    var margin = {top: 40, right: 10, bottom: 10, left: 10},
        width = 760 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var treemap = d3.layout.treemap()
        .size([width, height])
        .sticky(true)
        .sort(function(a,b) { return a.anzahl - b.anzahl; })
        .round(true)
        .value(function(d) { return Math.log(d.anzahl); });

    var div = d3.select("#treemap").append("div")
        .style("position", "relative")
        .style("width", (width + margin.left + margin.right) + "px")
        .style("height", (height + margin.top + margin.bottom) + "px")
        .style("left", margin.left + "px")
        .style("top", margin.top + "px")
        .attr("id", "first");

    var node = div.datum(data).selectAll(".node")
        .data(treemap.nodes)
        .enter().append("div")
        .attr("class", "node")
        .style("left", function(d) { return d.x + "px"; })
        .style("top", function(d) { return d.y + "px"; })
        .style("width", function(d) {  return Math.max(0, d.dx - 1) + "px"; })
        .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; })
        .style("background", function(d) { return d.color ? d.color : "#ffffff";})
        .text(function(d) { return d.children ? "blue" : d.keytable + "(" + d.anzahl + "-" + Math.max(0, d.dx) + "-" + Math.max(0, d.dy) + ")"; })
        ;

};

From another Js-Function i call buildTreemap() with new data. Now i want the treemap to redraw with Transition/Duration.

Could anybody help me please. Thanks a lot...

Update: I have added this:

d3.selectAll("input").on("change", function change() {
        var value = this.value === "count"
            ? function() { return 1; }
            : function(d) { return Math.log(d.anzahl); };

        node
            .data(treemap.value(value).nodes)
            .transition()
            .duration(1500)
            .call(position);
    });

and with this code the treemap rebuilds if i click "change"-Input. But if i take this code:

d3.selectAll("#search").on("keyup", function change() {
        var value = function(d) { return Math.log(d.anzahl); };

        node
            .data(treemap.value(value).nodes)
            .transition()
            .duration(1500)
            .call(position);
    });

the treemap stays and another treemap with the new data-values opens below my first. On keyup another js-function is fired and send new data to buildTreemap().

Answer 1

I've simplified and modified your jsfiddle slightly here to show the second set of data when you click the button. The key is that inside the function you call when the button is clicked, you pass in the new data like you did when you initialised the treemap and then handle enter and update selections accordingly, like so:

var node = div.datum(data2).selectAll(".node")
          .data(treemap.nodes);
node.enter().append("div")
    .attr("class", "node");

node.transition().duration(1500).call(position)
    .style("background", function(d) { return d.color ? d.color : "#ffffff"; })
    .text(function(d) { return d.children ? "blue" : d.keytable + "(" + d.anzahl + "-" + Math.max(0, d.dx) + "-" + Math.max(0, d.dy) + ")"; });

Note that the enter selection merges into the update selection, so it is sufficient to just append the nodes and set the attributes on the update selection.