CODEWITHSUNDEEP
javascriptd3.jstreemap
MikeV
MikeV

Reputation: 657

d3.js treemap new data doesn't render

This is my first attempt at d3.js and I can't figure out how to redraw the treemap. I am trying to load new data into the treemap example using a json request. I've added the following code to my treemap.js. 

d3.select(".search_field").on("click", function(){
    d3.json("/applications.json?search=Applejuice", function(json) {
        div.data([json]).selectAll("div")
            .data(treemap.nodes)
            .enter().append("div")
            .attr("class", "cell")
            .style("background", function(d) { return d.children ? color(d.name) : null; })
            .transition()
            .duration(1500)
            .call(cell);
   }); 
});

I've inspected var div after the request completes and the data is loaded in the object correctly.

Upvotes: 2

Views: 1545

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

You are appending new elements instead of updating the existing ones. The line

.enter().append("div")

takes care of this and should be deleted if you want to update the existing data. Calling .enter() after .data() will give you the data that previously wasn't there, .exit() the data that is not there anymore. If you find that the old and the new data aren't merged correctly, you can use the optional second argument to .data() to supply a merge function.

Upvotes: 2

Related Questions