マトリックスデータをSVGのヒートマップとして効率的にレンダリングするにはどうすればよいですか？

Question

私は、それぞれの値が-1と+1の間にあるデータの行列（> 5000rows）を持っています。ヒートマップをSVG形式で生成するためのスクリプトを作成しましたが、実際のデータセットでSVGファイルのサイズが大きくなりました。 Inkscapeは苦労し、レンダリングと画面の更新は本当に遅いです。それをsvgzに圧縮することは役に立ちません。

x、y、幅、高さ、塗りつぶしの5つの属性を持つ各矩形を使って、各値に対して矩形を描くアプローチを行った。あなたが想像することができるように、96x5000値で、それは多くの矩形です。各属性を整数に変換することにより、ファイルサイズを〜34MBから〜29MBに縮小しました。私が持っていたもう1つのアイデアは、塗りつぶし属性を削除し、各カラーグループごとに1つずつ、10-20クラスの1つに置き換えることでした。私はまだそれをやっているより良い方法がなければならないと思うので、まだ最後のビットをしていない。例として

： -

<rect fill="#000000" height="14" width="10" x="50" y="81" /> 

HTMLで、Iは、短いクラス名またはIDは、カラーグループを参照すると<tr's>と<th's>と<table>を、使用したいです。値が0または中間値の場合、クラス名は不要で、<th>はプリセットニュートラルカラーを継承できます。

SVGでは、正式な表指定はないようですが、どうすればこの問題に取り組むべきですか？ 私は現在、以下のオプションを検討している： -

1. display propertyは（悪い文書化）インラインテーブルオプションを持っています。明らかに、それは"an accidental remnant from CSS"になる可能性があります。これは、display:table-row-groupのスタイルを参照するIDを持つ、各行に<g>があることを意味します。
2. <text>要素を行として使用し、<tspan>をネストして、hereとしてください。
3. layout managerをECMAScriptで記述してください。

また、XSLTはパワフルで複雑ですが、ウェブブラウザでしか動作しないように思われます。私は理想的には、ベクターグラフィックスエディタで保存、表示、編集できるすべてのファイルを1つのファイルに保存したいと思います.XSLTがこれを可能にするかどうかはわかりません。

これを行う最も効率的な方法は何でしょうか？ファイルサイズはレンダリングの速度ほど重要ではありません。どんな助けでも大歓迎です。

UPDATE： - テキストのネストされたとtspanの者は、何の塗りつぶしや背景色の属性を持っていないよう

• 2は動作しないでしょう。この例では、背景色を指定するためにrectを使用しています.tspanは塗りの作成方法を提供していません。

私はまた、行の長さは、私がSVGを生成するためのPythonの(c)ElementTree moduleを使用しています。..遅いレンダリングとは何かを持っている可能性があるかどうかを疑問に思い、そしてデフォルトでは、単一の改行文字なしで、すべてのXMLを書き込みます。パーサー/レンダラーは、イメージの各行をXMLの新しい行に分けることができますか？

Answer 1

私はあなたがこのためにキャンバスを使用する方が良いかもしれないと思う。キャンバスを作成し、キャンバスに長方形を描画します。矩形は、キャンバスのビットマップの一部としてのみ存在します。