Javascript 使用d3.js使矩形的着色取决于这些矩形的数据值，并重新绘制

目前我正在d3中绘制一个树形图，我有一个两种颜色的颜色列表。我想让矩形的颜色取决于矩形的大小，所以最大大小是一种颜色，最小大小是另一种颜色。我还想根据颜色的大小线性地减少其不透明性，然后我想在数据更改时重新对这些颜色进行标记

所以我很好奇，你是如何在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);

  }

---

你可以用一个刻度来表示颜色。你能给我举个例子吗？例如：谢谢你的帮助，刻度的颜色很好用。关于更新的任何想法，我查看了一些旧的帖子，并尝试将树状图设置为.sticky（false），但这不起作用。那么，它怎么不起作用呢？发生了什么，你希望发生什么？