Mpld3: ブラウザ/ HTMLはfigsize * dpiではなくfigureサイズを指定します

何を求めているのかよくわかりません... matplotlibの図からインチ単位の図のサイズを取得し、matplotlibの図からdpiも取得します。 これを変更することをどのように提案していますか？ ありがとう

Pythonで設定された絶対図形サイズを使用するのではなく、次のような意味です。

<div id='parent' class='figsizeinfo'>
//mpld3 generated code
</div>

ここで、figsizeinfoはサイズのCSS仕様であり、mpld3はdivを埋めます。 （私の経験では、これがflotjsの仕組みです）

うーん...この質問は私のWeb関連の経験がないことを裏切るかもしれませんが、SVG（mpld3が使用）は完全にピクセルベースであり、簡単に変更することはできないと思いました。 flotjsはSVGまたは他の仕様を使用していますか？

SVG（Scalable Vector Format）グラフィックは、ピクセルベースではなくベクトルベースです。

これは、ウィンドウサイズに合わせて拡大縮小するバニラmatplotlibで生成されたSVG画像の例です。

http://bleepshow.pithy.io/SVG_Example

（あなたの例をはっきりとリフしました）

d3jsとすべてのキャンバスの描画図は、私が理解している限りベクトルであるため、これを実行できるはずです。

トリックは、私が想像する、設定することです

figwidth = $(“#parent”).width //(jquery based, but you get the point )

それよりも

figwidth = figsize[0] * dpi;

はい、SVGがベクターベースであることは知っていますが、誤解しない限り、キャンバスのサイズ、マーカーのサイズ、および画面上のマーカーの位置はポイントで測定されます。 任意のウィンドウサイズで任意の図形に正しくスケーリングするSVGコードを作成するのは非常に複雑なようです。

いいえ、とても簡単です。

これが私があなたのfig_to_d3コードに適用したハックです：

print mpld3.fig_to_d3(fig).replace("\n","\r").replace("var figwidth = 8.0 * 80","var figwidth = $(window).width()*.9;").replace("var figheight = 6.0 * 80","var figheight = $(window).height()*.9;")

これは次のように表示されます：

http://bleepshow.pithy.io/mpld3_window_scale_test

さて、ラベルは間違った場所にありますが、これもまた、絶対に図ではなく、divへの位置を参照するだけの問題です。 しかし、私が知る限り、図のレンダリングはうまく機能します。

（これは、更新しない限りサイズ変更されないことに注意してください。ただし、少し接着剤を使用すると、これも簡単です）

私は現在、これに基づいたソリューションを自分で仮帆装しています。プルリクエストに適したものに仕上げることができてうれしいです。

mpld3フィギュアのレスポンシブサイズは本当に便利です。 これを（ツールバーの）ボタンで追加すると、現在の図を新しいウィンドウで開くことができ、図全体のサイズを簡単に変更できます。

+1

@hadim 「pythonic」のままにしておきたいので、

mpld3.fig_to_d3(fig,size="adaptive")

良いトリガーになります

同意します ！

フィギュアのサイズを変えるのは簡単だと思います。 しかし、全体として、それが良い考えだとはまだ確信していません。 図形のサイズを変更すると、すべての線幅、マーカーの位置、マーカーのサイズ、フォントのサイズなどをハッキングする必要があります。これにより、コードが非常に複雑になり、大きなメリットはありません。 また、凡例、軸ラベル、およびその他のプロパティの正しい配置は、内部の図形のサイズとdpi設定に基づいて仮定を行うplt.draw（）コマンドに依存します。正直なところ、これを簡単に再配置できるかどうかはわかりません。 -事後に調整。

このmpld3の哲学は、matplotlibの図の内容を可能な限り反映した単純な出力を生成することです。 出力図形のサイズを変更する場合は、matplotlib図形のサイズを調整することをお勧めします。 それ以外のものは、実装、テスト、および保守がすぐに大きな頭痛の種になるようです。

プラグインはどうですか？

plugins.connect(fig, plugins.ResponsiveSize())

プラグインはおそらくそれを行うための良い方法でしょう。 しかし、繰り返しになりますが、フォントサイズ、線幅、マーカーサイズ、凡例の場所、軸のテキストの場所をどのように調整しますか？ これらすべての問題があるため、サイズ変更をサポートするための広範なインフラストラクチャがなければ、このようなプラグインの有用性は非常に限られていると思います。

@jakevdp私は同意しません：上記の3秒間のハックで苦しんだのはラベルの場所だけでした。繰り返しになりますが、それはより良いjavascriptを書くことの問題です。 DOMを使用すると、多くの作業を行うことなく、絶対位置と相対位置を使用できます。

現在のコードの実装方法では、すべてが図にハードコードされています。 少しの作業で、幅/高さ、線の太さ、およびフォントサイズをdivサイズに対して線形にスケーリングできます。 最も難しい部分はアスペクト比であり、それをロックすることができます。 アスペクト比がロックされると、すべてを線形にスケーリングするのは非常に簡単です

@hadimそれは良い考えです。

私はd3.jsを知らないので、何もわかりません。 しかし、私たちはsvgファイルに取り組んでいるので、私たちはそれを簡単に行うことができないとは本当に想像していません...

それを作るための最良の方法について考え始めるためのいくつかのリンク：

• http://eyeseast.github.io/visible-data/2013/08/28/sensitive-charts-with-d3/
• http://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3-js-visualisation-layout-sensitive
• http://www.triballabs.net/2013/02/the-basics-of-sensitive-d3-charts/

@dansteingartの場合は+1。 すべてのSVGの内部の長さと位置を相対座標に設定し、出力の前にviewBoxを使用して図全体のサイズを変更し、figsize matplotlibパラメーターと一致させます（または他の場合は応答します）。

@ dansteingart-十分なJSハックがあれば、それを機能させることができることに同意します。 しかし、それにもかかわらず、私はその機能を含めるためにこのパッケージを根本的に変更することをサポートしていません。

どうして？ さて、1つの部分は、プロット要素、図のサイズなどをmatplotlibインターフェイスを介して定義する必要があるというパッケージの前述の哲学に反することです。

2つ目は、これは「必須」機能ではないことです。このような必須ではない機能のコードベースを大幅に複雑にすると、長期的にはパッケージに悪影響を及ぼします。 これがなぜそうなるのかについての背景については、昨年のSciPyでの@ellisonbgの講演を参照してください。

この種の動作を追加するプラグインを使用したい場合は、ようこそ。 それがうまく機能する場合は、 pluginsモジュールに含める価値があるかもしれません。 しかし、どんなにクールであっても、パッケージの哲学に反する新機能の基本的な図形レイアウトの大幅な変更には固く反対しています。

私はこれに巻き込まれているところですが、ある種のプラグインが、ある種の興味深いレスポンシブなフィギュアのサイズ変更動作を実現できるように思えます。 @dansteingartは、機能のアイデアと、特定の方法で機能の実装を開始する価値があるかどうかについての質問からこのスレッドを開始しました。 質問への回答として、プラグインから始めて、_objects.pyまたは_js.pyを変更せずにプラグインがどこまで進むことができるかを確認することをお勧めします。 しかし、もしあなたがそれを望んでいるなら、私は一歩下がって、私たちが解決しようとしている問題について話したいと思います：

フィギュアの設定サイズが画面に反映されるのは素晴らしいことですが、キャンバスサイズを境界divに設定し、そのdivサイズをブラウザの幅などで決定できるようにするオプションがあると「応答性が高くなる」と思います。そうでなければ、開発者は望んでいます。

これが発生するユースケースについて、いくつか説明をお願いします。 通常のワークフローでは、クラウドで実行されているノートブックサーバーでipythonを使用し、Webブラウザーを最大化します。 そのため、仕事用のディスプレイからラップトップ用のディスプレイに切り替えて、画面の幅を狭くすると、問題が発生する可能性があります。 しかし、他の人が考えている他の設定があると確信しています。 ほかに何か？

@jakevdp十分に公平であり、Python側で_まったく_変更されるべきではないことに同意します。 ただし、JS側ではすべて公正なゲームだと思います。実験のポイントが、matplotlibとd3jsの最良の側面を組み合わせることにある場合は、追求する価値があると思います。

私の見方では、fig_to_d3を呼び出すと、Pythonの土地がなくなり、フィギュアを応答性の高いものにする=より良いJSを書くことができます。

レスポンシブページの有用性については、iPython出力だけでも同意しますが、PythonはiPythonノートブック以上のものであり、最終的には、mpl3dを使用してサイズレスポンシブWebページを作成する方がここで示唆するよりも便利だと思います。

あなたの論理によれば、matplotlibに合わせて詳細を拡大したい場合は、xlim / ylimを変更する必要があります。

すばらしいパッケージに改めて感謝します。プラグインではできないことを確認し、ご連絡いたします。

@aflaxman

これが発生するユースケースについて、いくつか説明をお願いします。 通常のワークフローでは、クラウドで実行されているノートブックサーバーでipythonを使用し、Webブラウザーを最大化します。 そのため、仕事用のディスプレイからラップトップ用のディスプレイに切り替えて、画面の幅を狭くすると、問題が発生する可能性があります。 しかし、他の人が考えている他の設定があると確信しています。 ほかに何か？

http://pithy.ioを参照してください

私は、私/私のグループ/私のクラスがスクリプトを記述してWebアプリに変換できるようにするためにpithyを作成しました。 フィギュアを窓にフィットさせると、生活がずっと快適になります。 MPL3dは、インタラクティブなプロットを実行するためのはるかに優れたツールを提供します（私はフロットをハッキングしていました）。インタラクティブなプロットがサイズに反応する場合、それはすべて勝ちです。

@dansteingartに感謝します。 JSはPythonユーザーからは隠されていますが、それでもコードであり、維持する必要があることに注意してください。 オープンソース開発に関する長年の私の経験では、新しい機能の実装に興奮している人々がよくやって来ます。これらの機能が統合されると、そのメンテナンスと維持は、パッケージに投資した数人の開発者の肩にかかっています。長期。 ほんの数年前に作成した、よく使用されるパッケージのバグレポートを無視せざるを得なくなるほど、私はすでに非常に熱心に取り組んでいます。 私は本当にmpld3がそのポイントに到達することを望んでいません。

ご理解のほどよろしくお願いいたします。プラグインに何をまとめることができるかを楽しみにしています。

@jakevdpその点はよく理解されており、プラグインアーキテクチャはその目的のためにうまく機能すると思います。 それが壊れた場合、それはあなたのせいではなく、私のせいになります（つまり、fig_to_d3を変更しない限り:-p）

書き直しが始まりました。これは、少なくとも特別な状況では、プラグインとして実装するのが_少し_簡単かもしれません。 でも、こういうダイナミックな状況を念頭に置いて書いたわけではないので、落とし穴があるかもしれません。 これについて何か進展があれば教えてください。

こんにちは、素晴らしいプロジェクトに感謝​​します。 この問題について何か進展はありましたか？ プラグイン/機能は開発されていますか？ 具体的には、「キャンバスサイズを境界divに設定するオプション」を指します。 ありがとう。

これは価値のある機能だと思いますが、プロット後の参照用に、d3を使用して図を自動スケールにすることができます（ここではウィンドウの高さで）

fetch("d3/" + figure + ".json")
    .then((response) => response.json())
    .then((data) => mpld3.draw_figure(figure, data))
    .then(() => {
        d3.select("#" + figure)
            .selectAll(".mpld3-figure")
            .attr("width", "100%")
            .attr("height", "70vh")
            .attr("viewBox", "0 0 1200 800")
            .attr("preserveAspectRatio", "xMinYMin meet");
    });

ここでは、@ hadimと@carlinmackを2番目に使用して、 viewBoxを使用します。 実際には非常に単純な場合があります。 たとえば、現在<svg width="1200" height="800">がある場合は、代わりに<svg viewBox="0 0 1200 800">を試してください。 それでおしまい。 viewBoxはsvg内の座標系を定義し、 widthおよびheightパラメーターはオプションになり、他の要素と同様に外部寸法を定義します。 width=100%を使用することも、cssを介して値を直接設定することもできます（cssは属性よりも優先されるため、幅と高さ）。

私は最近のクロームバージョンでそれをうまく使いました。 詳細については、ブラウザー間の依存関係を調査する必要がありますが、結論は明らかだと思います。

PS： https：//css-tricks.com/scale-svgに背景記事がありますが、上記で概説した方法が（少なくとも最新のブラウザーでは）正しく機能し、概念的に単純である場合、混乱を招きます： viewBox = "0 0 ${width} ${height}"内部コードの場合はwidth=...およびheight=... 。

ええ、それはまさに@carlinmackが提案したことです。 純粋なHTML / CSSであるため、「d3を使用して図形を自動スケール化する」と混乱しましたが、DOMの操作はd3の機能です。 @carlinmackで示される「preserveAspectRatio」は、私が信じているデフォルト値です（少なくとも、css-tricks.comリンクで説明されています）。 とにかくアスペクト比が維持されているのに、なぜheight="70vh"を示すのでしょうか。 それは非常に狭くて背の高い人物のある種の上限ですか？

正解です。ポートレートの数字がビューポートよりも高くなることは望ましくありませんでした:)

図が必要以上に大きくなることを除いて、周囲のコンテンツとの緊密な適合が必要な場合は適切ではありません。 代わりにmax-heightを使用するとうまくいきます。

これが私がブラウザにmpld3フィギュアをロードする方法です：

      let figureID = "id_12345" ; 
      let dataURL = figureID + ".json" ; 

      d3.json(dataURL).then( function(data) {
        mpld3.draw_figure(figureID, data);
        return data;
      }).then( function(data) {
        d3.select("#" + figureID)
          .selectAll(".mpld3-figure")
          .attr("width", null)   // remove "width" and "height" attributes as set by mpld3
          .attr("height", null)  
          .attr("viewBox", `0 0 ${data.width} ${data.height}`)
      });

議論してくれてありがとう@ carlinmack @ perrette ！ 偶然にも、これに遭遇したばかりです。@ dkong-idmの解決策は次のとおりです。

    const resizeChart = (viewBoxSettings) => {
        let svg = document.getElementsByClassName("mpld3-figure");

        if (svg && svg.length > 0) {
            svg[0].setAttribute("viewBox",viewBoxSettings );
            svg[0].setAttribute("width", "90vw");
            svg[0].setAttribute("height", "auto");
        }
    }

@vladh 、この自動スケーリング機能をmpld3 draw_figureオプションの引数として、またはスタンドアロン関数として追加するのは大変な作業でしょうか？

@cliffckerrこれをdraw_figureに間違いなく追加できます。おそらく、 Objectを取り、そのオブジェクトで指定されたすべての属性をsvgに設定する引数として、渡すことができます。 {viewBox: ..., width: '90vw', height: 'auto'}のようなもので。

fig_to_html()などをサポートするために、これを他の場所に追加する必要があるかどうか、このスレッドの他のユーザーに質問したいと思います。 もしそうなら、多分私たちはそれに対する解決策を考えるべきです。 それ以外の場合はお知らせください。すぐにdraw_figure()に変更を加えることができます。

@vladhはい、 fig_to_html()でも非常に便利です。