0

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

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

首次绘制图形时，它会根据大小进行排序，并使用可乐为矩形着色。使用计数而不是大小重绘地图我没有问题。我不知道如何让它使用 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。

谢谢

4

2 回答 2

2

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

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; });
于 2013-01-29T02:19:40.387 回答
0

我认为问题在于：

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

它应该是：

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

此外，您可能是指cell.selectAll('rect').style(...)而不是cell.append('rect').style(...)在if-then-else体内。但是，如果没有看到其余代码，我不能肯定地说。

于 2013-01-28T23:42:47.353 回答