0

前の質問のフォローアップ...最小限の水平線チャートの例を以前よりもはるかに最小限にしました(最小限の cubism.js 水平線チャートの例 (TypeError: コールバックは関数ではありません) )

        <body> 
                <div class="mag"></div>
                <script type="text/javascript">

var myContext = cubism.context();

var myMetr = myContext.metric(function(start, stop, step, callback) {
        d3.json("../json/600s.json.php?t0=" + start/1000 + "&t1=" + stop/1000 + "&ss=" + step/1000, function(er, dt) {
                if (!dt) return callback(new Error("unable to load data, or has NaNs"));
                callback(null, dt.val);
        });
});

var myHoriz = myContext.horizon()
        .metric(myMetr);

d3.select(".mag")
        .call(myHoriz);

                </script>
        </body>

d3.json() ビットは、測定値の .json バージョンを返す、私が作成したサーバー側の .php を呼び出します。.php は、(cubism の context.metric() が使用する) start、stop、step を http クエリ文字列の t0、t1、および ss 項目として受け取り、.json ファイルを返します。1000 で除算するのは、.php に ms ではなく s のパラメーターを期待させたためです。そして dt.val は、私の測定値の実際の配列がjson出力の「val」メンバーにあるためです。

{
    "other":"unused members...",
    "n":5,
    "val":[
        22292.078125,
        22292.03515625,
        22292.005859375,
        22292.02734375,
        22292.021484375
    ]
}

問題は、私がそれを（私が思うに）最低限のものにまで切り詰めたので、他の例から貼り付けて最高のものを期待するのではなく、実際にすべてを理解していることです（どのシナリオで、私が試すほとんどのこと改善するのではなく、壊すだけに変更する必要があります)、パラメータと関数を追加して視覚的に使いやすくする必要があります。

まず 2 つの問題は、この測定値が終日 22,300 前後で変動し、おそらく 1 日中 +/- 10 しか変化しないため、グラフは単なる緑色の四角形であり、ラベルには常に「22k」と表示されていることです。

ラベルを .format(d3.format(".3f")) で修正しました(SIメトリックプレフィックスを使用するデフォルトの.2sとは対照的に、上記の「22k」)。

私が理解できないのは、軸、スケール、範囲、または何を使用するかです。これにより、ビューアーに関連する数値の範囲のみが表示されます。水平線グラフの正の緑と負の青、および暗くなる色の側面については、実際には気にしません。概念実証として使用して、.json データ ソースから絶え間なく変化する測定ウィンドウを取得しましたが、本当に保持する必要がある部分は、serverDelay、ステップ、サイズ、および cubism.js のそのような機能です。データの最初のウィンドウをインテリジェントに取得し、.json 要求を介して段階的に取得します。

では、必要なキュービズム ビットを維持しながら、すべての 22300 グラフを有効に変更して、重要な +/- 10 単位を表示するにはどうすればよいでしょうか?

スコット・キャメロンのHorizo​​n.extent([22315, 22320])の提案を再更新...はい、試してみましたが、効果はありませんでした。上記の「最小限」からこれまでに変更したその他のこと...

var myHoriz = myContext.horizon()
        .metric(myMetr)
        .format(d3.format(".2f"))
        .height(100)
        .title("base1 (m): ")
        .colors(["#08519c", "#006d2c"])
//      .extent([22315, 22320])           // no effect with or without this line
;

22300 +/- 10 前後の 600 サンプル

metric.subtract を使用して myHoriz 行の上に挿入することで、グラフを改善することができました: (ただし、数値ラベルは役に立たなくなりました):

var myMetr2 = myMetr.subtract(22315);

var myHoriz = myContext.horizon()
        .metric(myMetr2)
        .format...(continue as above)

すべての例は非常に簡潔で表現力豊かに見え、逐語的にはうまく機能しますが、私がそれらに加えようとしている微調整の多くが裏目に出ているように見えます。それがなぜなのかはわかりません. 同様に、API wiki を参照すると、おそらく API から使用する 5 つのうち 4 つがすぐに機能しますが、その後、効果がないと思われるものにぶつかったり、チャートを完全に壊したりします。1 つには、渡されるパラメーターの多くが実際に関数であることに頭を悩ませているかどうかはわかりません。

このスケール/範囲の質問の後の次のハードルは、水平の時間軸を元に戻し (物事をより最小限にして理解しやすくするために切り取った後)、これを面グラフから折れ線グラフに切り替えることです。

とにかく、すべての指示と提案に感謝します。

これはより良い垂直スケールのものですが、今は数値ラベルが私が望むものではありません: 視覚的には良いが、数値的には悪い

4

1 に答える 1

0

Horizo​​n.extentを試しましたか? 水平チャートの [最小、最大] 値を指定できます。デフォルトでは、範囲内の値をチャートの高さ (`horizo​​n.height で指定するか、デフォルトで 30 ピクセル) 内のピクセルにマッピングするために線形スケールが作成されます。

于 2013-08-30T05:44:55.653 に答える