5

focus+ コンテキストの例を変更して、生徒と一緒に黒体スペクトルを調べようとしています。

http://bl.ocks.org/1667367

問題は、私にとってセグメントに色を付ける唯一の方法は、棒色のチャートをプロットすることです。

エリア ジェネレーターを使用したいと思います。このように、拡大すると補間のすべての利点を得ることができます。

各エリア要素にアクセスして、必要な RGB カラーで塗りつぶすことができません。

個々のエリア要素にアクセスして関数で埋める方法はありますか?

棒グラフ（コンテキスト）と同じように色を付けたいオレンジ色の領域（フォーカス）を持つファイルを次に示します。

http://bl.ocks.org/4345931

よろしくお願いします。

4

1 に答える 1

5

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)');
于 2012-12-20T18:44:21.637 に答える