使用d3访问各个区域元素

Question

我正在尝试修改焦点+上下文示例,以便与我的学生一起研究黑体光谱.

http://bl.ocks.org/1667367

问题是,对我而言,分色的唯一方法是绘制条形彩色图表.

我想用区域生成器做这个,这样我可以在放大时获得插值的所有好处.

我无法访问每个区域元素以我想要的rgb颜色填充它.

有没有办法访问单个区域元素并用函数填充它？

这是我的文件,带有橙色填充区域(焦点),我想要像条形图(上下文)那样着色.

http://bl.ocks.org/4345931

提前谢谢.

Answer 1

我认为这里正确的方法是使用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为每种颜色创建元素:

// 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); 

并使用url(#id)表示法应用它:

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