javascript - 使用 d3 访问单个区域元素

Question

我正在尝试修改 focus+ 上下文示例以与我的学生一起研究黑体光谱。

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