我認爲這裏的正確的方法是使用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)');
**感謝您對這種快速的答案**,這是一個非常好的方法,它保留的事實區域是唯一的路徑 – Ben
我是不是在正確的方向搜索。我需要多一點時間來了解這個偉大的圖書館的所有細微之處。 – Ben
很高興幫助。僅供參考 - 如果您認爲這是「正確的」答案(不是說在這種情況下只有一個正確的答案),您可以通過單擊左側的複選標記將其標記爲正確。 – nrabinowitz