1

私は、d3 および cubism API ページで見つかったコードから、必要なものを操作するように変更するまで、かなりの時間を費やしています...

https://github.com/square/cubism/wiki/Horizo​​nにリストされている Horizo​​n グラフの手順に従おうとしています が、Cube または Graphite データ ソースがありません。

だから私はここでmbostockの答えから最小限のサンプルメトリックを作ろうとしています cubism.jsの 他のデータソースの使用 および/またはランダム値を返すメトリックの例はこちら https://github.com/square/cubism/wiki/Context

context.metric() のパラメータを説明している Context API ページで、「...結果が利用可能になったときのコールバック関数」の部分が理解できないと思います。サーバーに次のものがあり、ブラウザーで表示/更新すると、ブラウザーのコンソールに「TypeError: callback is not a function」が表示されます。

            <body> 
                <div class="mag"></div>

                <script type="text/javascript">

var myContext = cubism.context();

var myHoriz = myContext.horizon()
        .metric(function(start, stop, step, callback) {
                var values = [];
                start = +start;
                stop = +stop;
                while (start < stop) {
                        start += step;
                        values.push(Math.random());
                }
                callback(null, values);
        });

d3.select(".mag").selectAll("p")
        .data([1, 2, 3, 7])             // the "times" for which I want to graph the data
        .enter().append("p")
        .call(myHoriz);

                </script>
        </body>

ああ（編集）、追加する必要があります、コードは実行されます.4つの段落がdivに追加されたドキュメントを取得し、各段落のテキストコンテンツは数字1、2、3、7です。少なくとも、select()、data()、enter()、および append() ビットが機能しています。

4

2 に答える 2

2

わかりました スコット・キャメロンの指摘で、私はハードルを乗り越えました。ここでも、将来の読者のために、結果として得られる作業コードとともに「回答」します。私が望むほど最小限の例ではありませんが、エラーを排除します。より最小限にするために、新しい質問でフォローアップを求めます。

            <body> 
                <div class="mag"></div>

                <script type="text/javascript">

var myContext = cubism.context();

var myMetr = myContext.metric(function(start, stop, step, callback) {
        var values = [];
        start = +start; 
        stop = +stop;
        while (start < stop) { 
                start += step;
                values.push(Math.random());
        }       
        callback(null, values);
});     

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

d3.select(".mag").selectAll("p")
        .data([1, 2, 3, 7])
        .enter().append("p")
        .call(myHoriz);

                </script>
        </body>
于 2013-08-28T15:32:34.073 に答える
1

Horizo​​n.metricとcontext.metricを混同しているようです。それはcontext.metric、定義している署名の機能を取ることです。

于 2013-08-28T14:46:44.450 に答える