0

次のような形式でjson経由でd3にデータを供給しています。

[
   {
      "outcome_id":22,
      "history":[
         {
            "time":"2013-05-06T16:38:55+03:00",
            "balance_of_power":0.2
         },
         {
            "time":"2013-05-07T00:38:55+03:00",
            "balance_of_power":0.2222222222222222
         },
         {
            "time":"2013-05-07T08:38:55+03:00",
            "balance_of_power":0.36363636363636365
         }
      ],
      "winner":true,
      "name":"Pauline"
   },
   {
      "outcome_id":23,
      "history":[
         {
            "time":"2013-05-06T16:38:55+03:00",
            "balance_of_power":0.2
         },
         {
            "time":"2013-05-07T00:38:55+03:00",
            "balance_of_power":0.1111111111111111
         },
         {
            "time":"2013-05-07T08:38:55+03:00",
            "balance_of_power":0.09090909090909091
         }
      ],
      "winner":false,
      "name":"Romain"
   }
]

このデータを使用して、複数シリーズの折れ線グラフ (時間の経過に伴う "balance_of_power" の進化を示す) と、すべてのシリーズの "balance_of_power" の最新の値を表すドーナツ グラフの両方を描画します。

したがって、各最上位の配列要素は、いくつかの属性を持つオブジェクトであり、そのうちの 1 つは「履歴」であり、それ自体がオブジェクトの配列です (time および balance_of_power 属性を持ちます)。

実際の例はここにあります。

ドーナツ グラフのデータを生成するために、各履歴配列 (データは時間で並べ替えられます) から最新の要素を取得する関数を使用し、「last_balance」と呼ばれる別の属性を生成します。

たとえば、最初の要素は次のようになります。

{
   "outcome_id":22,
   "history":[...],
   "winner":true,
   "name":"Pauline",
   "last_balance":0.36363636363636365
}

次に、パイ レイアウトの値から適切なアクセサーを指定します。

pie = d3.layout.pie().value(function(d) { return d.latest_balance; })

ここで、余分なステップを取り除き、アクセサー関数を変更して、初期データ構造から値を直接読み取れるようにし、引数として指定された時間の任意の balance_of_power にアクセスできるようにします。

パイ値のアクセサを変更するだけでそれを行う方法はありますか?

編集

.value 関数を次のように変更しました。

.value(function(d) {
  var h = d.history[0];
  d.history.forEach(function(elt, i, a) {
    console.log("======"); // start debug
    console.log("search for:"+selected_time.toString());
    console.log("current value:"+d.history[i].time.toString());
    console.log("test:"+(d.history[i].time == selected_time));
    console.log("======"); // end debug
    if(d.history[i].time == selected_time) {
      h = d.history[i];
    }
  });
  return h.balance_of_power;
})

しかし、値が同一であるように見えても、比較は常に失敗するため、前のコードは常に初期値を返します。

最後の反復で JavaScript コンソールに表示される内容は次のとおりです。

====== final_balance_donut_chart.js?body=1:11
search for:Thu Jun 06 2013 16:06:00 GMT+0200 (CEST) final_balance_donut_chart.js?body=1:12
current value:Thu Jun 06 2013 16:06:00 GMT+0200 (CEST) final_balance_donut_chart.js?body=1:13
test:false final_balance_donut_chart.js?body=1:14
======

編集2

何らかの理由で、これを機能させるために両方の時間を文字列に変換する必要がありました。

.value の最終的なコードは次のとおりです。

.value(function(d) {
  var h = d.history[0];
  d.history.forEach(function(elt) {
    if(elt.time.toString() == selected_time.toString()) {
      h = elt;
    }
  });
  return h.balance_of_power;
})
4

1 に答える 1

0

はい、コードは次のようになります。

time = "...";
pie = d3.layout.pie()
        .value(function(d) {
            var h = d.history[0];
            for(var i = 0; i < d.history.length; i++) {
                if(d.history[i].time == time) {
                    h = d.history[i];
                    break;
                }
            }
            return h.balance_of_power;
        });

ただし、時間が履歴にない場合を処理する必要があります。

于 2013-06-12T16:04:48.057 に答える