2012-12-20 60 views
5

的個別區域的元素我試圖修改焦點+背景爲例,研究和我的學生黑體譜。獲取訪問與D3

http://bl.ocks.org/1667367

的問題是,對我來說,色段的唯一途徑是繪製酒吧彩色圖表。

我想與區域生成做到這一點,這樣我可以有插值的所有優點,當我放大上。

我不能訪問到每個區域元素,以填補其在RGB顏色我想要的。

有什麼辦法來查看在個別區域要素和與函數補嗎?

這裏是我的文件,與我想要的顏色作爲我與條形圖(上下文)做了一個橙色填充區域(焦點)。

http://bl.ocks.org/4345931

在此先感謝。

回答

5

我認爲這裏的正確的方法是使用linearGradient元素(specs)。您可以在此處看到我的實現:http://jsfiddle.net/nrabinowitz/JZACC/

這裏的要點是,不是將每種顏色都繪製爲單獨的元素,而是定義光譜顏色的漸變並將相同的漸變應用於區域和上下文條:

// set up gradient elements 
var gradient = defs.append('linearGradient') 
    .attr('id', 'spectrumGradient'); 

// set up gradient scale 
var gx = d3.scale.linear().range([0, 1]); 

然後,在加載數據時,您可以爲每種顏色stop元素:使用url(#id)符號

// update gradient scale 
gx.domain(x.domain()); 
// create gradient 
gradient.selectAll('stop') 
    // remove duplicates 
    .data(data) 
    .enter().append('stop') 
    .attr('offset', function(d) { return gx(d.wl); }) 
    .attr('stop-color', toRGB); 

,並將其應用:

focus.append("path") 
    .datum(data) 
    .attr("clip-path", "url(#clip)") 
    .attr("d", area) 
    .attr('fill', 'url(#spectrumGradient)'); 
+0

**感謝您對這種快速的答案**,這是一個非常好的方法,它保留的事實區域是唯一的路徑 – Ben

+0

我是不是在正確的方向搜索。我需要多一點時間來了解這個偉大的圖書館的所有細微之處。 – Ben

+0

很高興幫助。僅供參考 - 如果您認爲這是「正確的」答案(不是說在這種情況下只有一個正確的答案),您可以通過單擊左側的複選標記將其標記爲正確。 – nrabinowitz