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

使用d3访问各个区域元素

1 个答案: