title: dynamically update d3.js treemap
body: <p>I am trying to dynamically update my d3 treemap when the data updates. I have two functions, one that I call initially to build the treemap and another to redraw the treemap. When I redraw the treemap, I get a thin black bar on top of the treemap, and the first element in the array that I am graphing goes black. If I click on either of the two black elements. I get the error...</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'dx' of undefined 
  </code></pre>
  
  <p>So the data being passed to the cell is undefined.</p>
  
  <p>Additionally when I call regraph I have checked and the data has changed, but the graph is unchanged from when I initially built the treemap with the exception of the two black elements.</p>
  
  <p>The code for building the treemap is below. Also the createObj function takes two arrays and creates a Json object.</p>
  
  <pre><code> function drawTreeMap(array1,array2){
          console.log("got to drawing");
          nestedJson=createObj(array1, array2);
              w = 1880 - 80,
              h = 900 - 180,
              x = d3.scale.linear().range([0, w]),
              y = d3.scale.linear().range([0, h]),
              color = d3.scale.linear()
                  .range(['lightgreen', 'darkgreen']) // or use hex values
                  .domain([computeMin(array2), computeMaxNum(array2)]);
              root,
              node;
  
  
              treemap = d3.layout.treemap()
                  .round(false)
                  .size([w, h])
                  .sticky(true)
                  .padding([10, 0, 0, 0])
                  .value(function(d) { return d.size; });
  
              svg = d3.select("#body").append("div")
                  .attr("class", "chart")
                  .style("width", w + "px")
                  .style("height", h + "px")
                .append("svg:svg")
                  .attr("width", w)
                  .attr("height", h)
                .append("svg:g")
                  .attr("transform", "translate(.5,.5)");
  
  
                node = root = nestedJson;
  
                var nodes = treemap.nodes(root)
                    .filter(function(d) { return !d.children; });
  
                var cell = svg.selectAll("g")
                    .data(nodes)
                    .enter().append("svg:g")
                    .attr("class", "cell")
                    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
                    .on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });
  
                cell.append("svg:rect")
                    .attr("width", function(d) { return d.dx - 1; })
                    .attr("height", function(d) { return d.dy ; })
                    .style("fill", function(d) { return color(d.size)});
  
                cell.append("svg:text")
                    .attr("x", function(d) { return d.dx / 2; })
                    .attr("y", function(d) { return d.dy / 2; })
                    .attr("dy", ".35em")
                    .attr("text-anchor", "middle")
                    .text(function(d) { return (d.name+",--  "+d.size); })
                    .style("opacity", function(d) { d.w = this.getComputedTextLength(); return d.dx &gt; d.w ? 1 : 0; });
  
  
  
  
                d3.select(window).on("click", function() { zoom(root); });
  
                d3.select("select").on("change", function() {
                  treemap.value(this.value == "size" ? size : count).nodes(root);
                  zoom(node);
                });
  
      }
  </code></pre>
  
  <p>The code for redrawing is below.</p>
  
  <pre><code>function redrawGraphFromJson(data) {
        treemap = d3.layout.treemap()
          .round(false)
          .size([w,h])
          .value(function(d) { return d.size; })
          .sticky(true);
  
        // Draw the graph
        node = root = data;
        var nodes = treemap.nodes(root)
                    .filter(function(d) { return !d.children; });
  
        var cell = svg.selectAll("g")
          .data(nodes)
          .attr("class", "cell")
          .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
          .on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });
  
      cell.append("svg:rect")
          .attr("width", function(d) { return d.dx - 1; })
          .attr("height", function(d) { return d.dy ; })
          .style("fill", function(d) { return color(d.size);});
  
      cell.append("svg:text")
          .attr("x", function(d) { return d.dx / 2; })
          .attr("y", function(d) { return d.dy / 2; })
          .attr("dy", ".35em")
          .attr("text-anchor", "middle")
          .text(function(d) { return (d.name+",--  "+d.size); })
          .style("opacity", function(d) { d.w = this.getComputedTextLength(); return d.dx &gt; d.w ? 1 : 0; });
  
    }
  </code></pre>
  
  <p>Thank you.</p>