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