d3 と Flask を使用して、ブラウザにツリー図を表示しています。全体がローカルに保存され、操作されます。
ユーザーがツリー ダイアグラムの各ノードにカーソルを合わせたときに、関連する画像を表示したいと考えています。
ツリー ダイアグラムのベースとなる JSON データについては、次のように url_for と静的フォルダーを使用しています。
d3.json("{{ url_for('static', filename=json_data) }}", function(error, flare) {
// Lots of code
d3 を含める場合も同じです。
<script src="{{ url_for('static', filename='d3.js') }}"></script>
ただし、ホバー時に表示したい画像に関しては、JSON のデータを使用して画像の名前を作成しています。これは Python 変数ではなく JavaScript 変数を使用することを意味するため、url_for を使用して表示する方法がわかりません。
別の方法として、さまざまな絶対パスと相対パスを使用してみましたが、何も機能しませんでした。Firefox がローカル ファイルを表示したくないという記事を読んだことがありますが、それは私のコンピューターから実行されているものには当てはまりませんか? 通常、ブラウザで多くのローカル ファイルを表示できます。いずれにせよ、LocalLink というアドオンをインストールしました。これは、このメソッドで使用しようとしていたコードです。
var img_path;
d3.selectAll( ".node" ).on( "mouseover", function(d) {
img_path = "{{ image_path }}" + d.name + ".png";
document.getElementById('thumb').src=img_path;
document.getElementById('thumb').style.display='block';
ここで、python image_path 変数は、r"file:///C:/Python27/my/app/folders/etc/" の行に沿ったものです。
これはほとんど機能します。画像はホバー時に表示されませんが、Firebug を使用して HTML の適切なタグにカーソルを合わせると、カーソルの横に正しい画像がサムネイルとして表示されます。
「file:///.....」の場所を参照する画像を含む単純な HTML ページを作成してみました。それはうまくいきます。これは、この方法の問題はFlaskだと思います。Web の場所の絶対パスに問題はないようです (私はそれをテストしましたが、動作します)。そのため、Flask はローカル ファイルの場所への絶対パスを好まないと推測しています。
したがって、これがどのように解決できるかについては、いくつかの可能性があります。
- JavaScript で生成された変数で url_for を使用する方法があります。
- 情報を Python 変数に戻し、それを url_for で使用する方法があります。
- 「file:///.....」形式を使用して、Flask にこれらの画像を表示させる方法があります。
他の方法はありますか？
私が検討した他の唯一のオプションは、すべてをオンラインに移行することです。しかし、私は Python ホスティングに詳しくなく、このアプリケーションでは Twisted と PyQT を使用しています。それらをサーバーにインストールする方法がわかりません。私が構築したものがオンラインで機能するかどうかさえわかりません。ライブ Web サイトで Twisted または PyQT を使用できますか? 私は Twisted が何をしているのか、漠然とした感覚しか持っていません。
これが私の最良の/唯一の選択肢であると思われる場合は、私のアプリケーションがどのように機能するかについて詳細な説明を提供しますが、それまでは混乱させません.