漸變色在D3

首先，這樹形圖是從以前的問題，在職位，要求不同的什麼我試圖做到的，是在D3整個樹形圖的梯度，像我們在谷歌樹狀圖。漸變色在D3

我想實現http://bost.ocks.org/mike/treemap/和工作相同，但在D3我試圖有一個顏色漸變。

目前我通過

color = d3.scale.category20c()

和

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

我的SVG元素就這樣做。但是我希望漸變顏色更像熱圖，以便使樹形圖中的大框更綠，更小的框更少綠。有沒有在d3/css中指定的方法？

來源

2013-05-30 neoeahit

您可以使用[SVG梯度（http://www.w3schools.com/svg /svg_grad_linear.asp）。 –

即時興趣建立類似的東西。我能以某種方式訪問鏈接中的代碼嗎？ – BKS

這聽起來像你想樹形圖應用到每個盒子顏色標尺。這是非常簡單的：

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

然後用

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

難的部分適用於這裏是確定的領域 - 這取決於你的數據是如何組織的，你可能需要步行樹收集它。在博斯托克例如，您可以獲取數據的程度你才加入到這樣的元素後：

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

來源

2013-05-30 22:10:15 nrabinowitz

謝謝。我也嘗試使用d3.scale.ordinal（）。range（[需要的顏色代碼]）。這幫助我使用自己的顏色範圍。 – neoeahit

我用這樣：顏色= d3.scale.ordinal（）範圍（[ '009933'， '00CC33'， '00FF33'， '＃3D9140'， '＃4BB74C'， '＃6AC06D'， '＃81CD82' ， '＃62E46B'， '＃CBF7CB'， '＃FADEE0'， '＃F6BABE'， '＃FF9A9E'， '＃EB7273'， '＃FF4F56'， '＃C80000'， '＃D80000'， '＃E00000' ， '＃E80000'， '＃F00000'， '＃F80000'， '＃FF0000']）。結構域（[d3.extent（d3.selectAll（ 'rect.child'）。數據（））]）但這似乎沒有正確着色節點？你能指導我嗎？ – neoeahit

你需要一個線性的尺度，而不是一個序數。要使用線性刻度，你需要儘可能多域數據點範圍的顏色 - 所以你需要你的數據範圍的上下兩端之間進行插值，你的域需要獲得儘可能多的積分。 – nrabinowitz

回答

相關問題