使用d3.js和regraphing对rects进行着色取决于这些rects的数据值

Question

目前我在d3中绘制了一个treeMap，我有一个两种颜色的colorList。我想这样做是为了使rects的颜色取决于rects的大小，所以最大尺寸是一种颜色，最小尺寸是另一种颜色。我还想根据它们的大小线性地使颜色不那么透明，然后我想在数据发生变化时对它们进行重新分类。

所以我很好奇，你如何在d3.js中制作这种颜色设置功能？由于某些原因，当我调用redrawGraphFromJson（数据）时，我的图表没有更新。谢谢你的帮助。

这是我目前的代码。

var colorList=['#F80000','#4682B4'];

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.ordinal().range([colorList[0]]),   //d3.scale.category10(),
            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.parent.name); });

              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 > 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);
              });

    }
    function redrawGraphFromJson(data) {
      treemap = d3.layout.treemap()
        .round(false)
        .size([w,h])
        .value(function(d) { return d.number; })
        .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);

  }