D3树形图中的渐变颜色

Question

首先,这与帖子中提到的上一个问题不同,因为我想要实现的是d3中整个树形图的渐变,就像我们在谷歌树形图中所拥有的那样.

我正在尝试实现http://bost.ocks.org/mike/treemap/并在同样的工作,但在d3我试图在其中有一个颜色渐变.

目前我正在这样做

color = d3.scale.category20c()

和

.style("fill", function(d) { return color(d.name)})

在我的svg元素上.但是我想要一种更像渐变色的渐变色,以便使树图中更大的盒子更绿,更小的盒子更绿.是否有一种方法在d3/css中指定？

Answer 1

听起来你想要一个颜色比例应用于树图中的每个框.这很简单:

var colorScale = d3.scale.linear()
    .range(['lightgreen', 'darkgreen']) // or use hex values
    .domain([minValue, maxValue]);

然后申请

.style("fill", function(d) { return colorScale(d.value)});

这里的难点在于确定域 - 根据数据的结构,您可能需要走树来收集它.在Bostock示例中,您可以在将数据加入到以下元素后获取数据的范围:

d3.extent(d3.selectAll('rect.child').data(), function(d) { return d.value; });