梯形颜色在D3的树形图中 [英] Gradient color in a treemap for D3

问题描述

首先这是不同于以前的问题在帖子，我想实现的是一个梯度的整个treemap在d3，就像我们在谷歌treemaps。

我想尝试 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 {return color（d.name）}）

但我想有一个渐变的颜色更像一个热图，以便使更大的盒子在树形图更绿色和更小的盒子绿色。有没有办法在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屋！