数据更改时Json中的d3.js颜色

以此为例：

我试图使树映射中矩形的颜色取决于数据的可视化。该示例允许您按大小或计数绘制树贴图。我在每个条目json文件中添加了两个变量，“cola”和“colb”。每个都只是一种颜色

第一次绘制图形时，图形将根据大小进行排序，并使用cola为矩形着色。我可以使用计数而不是大小来重新绘制地图。我搞不懂的是如何让它用可乐代替可乐

这是部分代码。这是首次拾取颜色的位置

  cell.append("svg:rect")
      .attr("width", function(d) { return d.dx - 1; })
      .attr("height", function(d) { return d.dy - 1; })
      .style("fill", function(d) { return d.cola; });

这是更改函数

  d3.select("select").on("change", function() {
    treemap.value(this.value == "size" ? size : count).nodes(root);
    if (treemap.value(this.value == "size")) {
    cell.append("svg:rect").style("fill", function(d) {return d.cola; });
     }
    else {
     cell.append("svg:rect").style("fill", function(d) {return d.colb; });
    };
    zoom(node);

  });
});

还在想办法找出d3

---

谢谢

我认为问题在于：

if（treemap.value（this.value==“size”）。。。

应改为：

if（this.value==“size”）。。。

---

另外，您可能指的是

cell.selectAll（'rect'）.style（…）

而不是

cell.append（'rect'）.style（…）

在

if-then-else

正文中。但是，如果看不到代码的其余部分，我就不能肯定了。

您可以在代码中使用某种变量来指定要使用的颜色（基于select控件的状态）：

及

然后，选择按钮可以切换此变量：

d3.select("select").on("change", function() {
  treemap.value(this.value == "size" ? size : count).nodes(root);
  cola = (this.value == "size");
  zoom(node);
});

同时确保在缩放功能中更新填充样式：

  t.select("rect")
      .attr("width", function(d) { return kx * d.dx - 1; })
      .attr("height", function(d) { return ky * d.dy - 1; })
      .style("fill", function(d) { return cola ? d.cola : d.colb; });

---

谢谢这非常有效。我也完全错过了缩放功能的更新。非常感谢你的帮助。谢谢你的帮助。最后，我只是使用一个变量根据选择控件的状态指定颜色。

d3.select("select").on("change", function() {
  treemap.value(this.value == "size" ? size : count).nodes(root);
  cola = (this.value == "size");
  zoom(node);
});

  t.select("rect")
      .attr("width", function(d) { return kx * d.dx - 1; })
      .attr("height", function(d) { return ky * d.dy - 1; })
      .style("fill", function(d) { return cola ? d.cola : d.colb; });