[英]Gradient color in a treemap for D3
First of all this is different from the previous question asked in the posts, for what i am trying to achieve is a gradient for the entire treemap in d3, like what we have in google treemaps. 首先,这与帖子中提出的上一个问题有所不同,因为我要实现的是d3中整个树图的渐变,就像我们在google树图中一样。
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. 我正在尝试实现http://bost.ocks.org/mike/treemap/并进行相同的工作,但是在d3中,我试图在其中添加颜色渐变。
Currently I am doing this by 目前,我正在这样做
color = d3.scale.category20c()
and 和
.style("fill", function(d) { return color(d.name)})
on my svg element. 在我的svg元素上。 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?
在d3 / css中有一种方法可以指定吗?
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]);
Then apply with 然后申请
.style("fill", function(d) { return colorScale(d.value)});
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:
在Bostock示例中,将数据连接到像这样的元素后就可以得到数据的范围:
d3.extent(d3.selectAll('rect.child').data(), function(d) { return d.value; });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.