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