D3 树图中的渐变颜色 [英] Gradient color in a treemap for D3

问题描述

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

我正在尝试实施 http://bost.ocks.org/mike/treemap/ 并在做同样的事情，但在 d3 中我试图在其中添加颜色渐变.

I am trying to implement http://bost.ocks.org/mike/treemap/ and working on the same, but in d3 i was trying to have a color gradient in it.

目前我正在这样做

color = d3.scale.category20c()

和

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

在我的 svg 元素上.但是我想要一个更像热图的渐变色，以便使树图中较大的框更绿，而较小的框更绿.有没有办法在 d3/css 中指定?

on my svg element. But i want to have a gradiant color more like a heatmap, so as to make larger boxes in treemap more green and smaller boxes less green. is there a way in d3/css to specify that?

推荐答案

听起来您希望将颜色比例应用于树图中的每个框.这很简单:

It sounds like you want a color scale applied to each box in the treemap. This is pretty simple:

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

然后申请

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

这里的难点在于确定域 - 根据数据的结构方式，您可能需要遍历树来收集它.在 Bostock 示例中，您可以在将数据加入元素后获得数据的范围，如下所示:

The hard part here is determining the domain - depending on how your data is structured, you might need to walk the tree to collect it. In the Bostock example, you can get the extent of the data after you've joined it to the elements like this:

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

这篇关于D3 树图中的渐变颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！