css - D3 TreeMap 中的渐变颜色

Question

首先，这与之前在帖子中提出的问题不同，因为我想要实现的是 d3 中整个 TreeMap 的渐变，就像我们在 google TreeMap 中所拥有的那样。

我正在尝试实现 http://bost.ocks.org/mike/treemap/并进行相同的工作，但在 d3 中，我试图在其中添加颜色渐变。

目前我正在通过

color = d3.scale.category20c()

和

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

在我的 svg 元素上。但我想要一种更像热图的渐变色，以便使 TreeMap 中较大的框更绿，较小的框更绿。在 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; });