有条件地设置可缩放树图的颜色

【问题标题】：Set Colors of zoomable treemap conditionally有条件地设置可缩放树图的颜色
【发布时间】：2015-06-01 14:35:09
【问题描述】：

我正在使用 D3 库使用 Javascript 和 JSON 为我的应用程序数据创建可缩放树形图。我在网上看到很多次使用 d3 类别的颜色来确定每个部分的颜色。但是，我希望使用我的应用程序逻辑为树形图的各个部分着色。如下：

If conditionA
  color = red
If conditionB
  color=green 
....

有什么办法可以做到这一点..检查我的JSON对象的值并仅根据某些条件设置部分的颜色；并将所有其他部分设置为默认颜色？

【问题讨论】：

是的，这是完全可行的。只需提供一个函数，该函数返回每个 DOM 节点的颜色属性（或样式）值，并将所需的逻辑放入该函数中。

标签： javascript json d3.js colors

【解决方案1】：

您的问题有点模糊（下次包括一些代码！），但总的来说，假设您有这样的数据：

var data = [{
  conditionA: true,
  conditionB: false
}, {
  conditionA: false,
  conditionB: true
}, {
  conditionA: false,
  conditionB: false
}];

那么就这么简单：

svg.selectAll('.SomeCircles')
  .data(data)
  .enter()
  .append('circle')
  .attr('r', 20)
  .attr('cx', function(d, i) {
    return i * 25 + 25;
  })
  .attr('cy', function(d, i) {
    return i * 25 + 25;
  })
  .attr('class', 'SomeCircles')
  .style('fill', function(d) { //<-- filling based on an attribute of my data
    if (d.conditionA) {
      return 'red';
    } else if (d.conditionB) {
      return 'green';
    } else {
      return 'blue';
    }
  });

这是example。

【讨论】：