使用 d3 访问单个区域元素答案

【问题标题】：Getting access to individual area elements with d3使用 d3 访问单个区域元素
【发布时间】：2012-12-21 02:44:21
【问题描述】：

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

http://bl.ocks.org/1667367

问题在于，对我而言，为分段着色的唯一方法是绘制条形彩色图表。

我想用区域生成器来做，像这样我可以在放大时享受插值的所有好处。

我无法访问每个区域元素以将其填充为我想要的 rgb 颜色。

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

这是我的带有橙色填充区域（焦点）的文件，我想像使用条形图（上下文）一样对其进行着色。

http://bl.ocks.org/4345931

提前谢谢。

【问题讨论】：

标签： javascript d3.js

【解决方案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)');

【讨论】：

感谢您的快速回答，这是一个非常好的方法，它保留了该区域是一条独特路径的事实
我的搜索方向不正确。我需要更多时间来了解这个伟大图书馆的所有微妙之处。
很高兴它有帮助。仅供参考 - 如果您认为这是“正确”答案（并不是说在这种情况下只有一个正确答案），您可以通过单击左侧的复选标记将其标记为正确。
我将其标记为正确，它运行良好，我将在其他图中尝试这种渐变的用法。 感谢您分享您的知识