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