Question

以此为例：http://mbostock.github.com/d3/talk/20111018/treemap.html

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

首次绘制图形时，它会根据大小进行排序，并使用可乐为矩形着色。我没有问题使用count而不是size来重绘地图。我无法弄清楚的是如何使用colb而不是可乐。

这是代码的一部分。这是首次采摘颜色的地方。

  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。

由于

Answer 1

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

var cola = (d3.select("select").node().value == "size");

和

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

Answer 2

我认为问题在于：

 if (treemap.value(this.value == "size")) ...

应该是：

if (this.value == "size") ...

此外，您可能在cell.selectAll('rect').style(...)正文中表示cell.append('rect').style(...)而不是if-then-else。但是，如果没有看到剩下的代码，我无法肯定地说。

来自Json的d3.js颜色数据变化

2 个答案: