D3：2D配列データによって駆動されるグレースケール画像表示

d3を使用してグレースケール画像、つまりピクセル強度の2次元配列を表示する方法は誰にも分かりますか？私はどこの例も見つけられないようですが、それは難しいでしょうか？すべてのヘルプ/リンク/ポインタが高く評価されました！D3：2D配列データによって駆動されるグレースケール画像表示

出典

2012-08-07 reptilicus

ヒートマップのような音 –

そうですね。私はd3ヒートマップへのリンクをいくつか見ています。私は少し驚いている。。。 – reptilicus

「普通のイメージ」とはどういう意味ですか？ –

イメージを表示したい場合は、image elementと "xlink：href"属性を使用します。たとえば：あなたはグレースケール画像を色付けしたい場合は

svg.append("image") 
    .attr("xlink:href", "my.png") 
    .attr("width", 960) 
    .attr("height", 500);

は、その後、発散カラースケールを作成するために、分位を使用して、このcolorized heightmap exampleを見て、より良い知覚HCL補間と：

データを他の表現で表現している場合は、次の例が便利です：

は最後に、あなたが個々のサンプルではなく、事前に計算された2Dヒストグラムを持っている場合は、上記のヒートマップのいずれかを生成する前にビンにデータが必要になります。

出典

2012-08-07 23:43:56 mbostock

非常にクール、情報ありがとうございます。高さマップは私がゴアを目指していたものの素敵な例です。基本的に私は2次元のpython配列を持っています。 d3 Michaelをお寄せいただきありがとうございます！ – reptilicus

1つの質問、http://bl.ocks.org/3074470の画像は滑らかで、ピクセル化されていないのはなぜですか？ – reptilicus

私はあなたの質問に答えている場合は、この質問に合格とマークしてください。 2番目の質問では、非ネイティブ解像度で表示されているときにブラウザがキャンバスをリサンプリングするため（他の画像と同様に）、画像が滑らかになります。この動作は[image-rendering]（https://developer.mozilla.org/en-US/docs/CSS/Image-rendering）スタイルのプロパティで制御できます。 – mbostock

D3：2D配列データによって駆動されるグレースケール画像表示

答えて

関連する問題