D3.jsを使用して、JSONからの先週、先月、および昨年のデータの棒グラフを表示します

サラバナ

JSONから月次、週次、日次のデータを表示する方法を教えてください。

例:

  1. JSONから過去4週間のデータを取得する方法(毎月)?
  2. JSONから過去12か月のデータを取得する方法(毎年)?
  3. JSONから過去7日間のデータを取得する方法(毎週)?

JSONの例:

{"date" : "2016-06-16"}
...
...
{"date" : "2016-05-16"}
{"date" : "2016-04-16"}
ヒューグ・ステファンスキー

コードをplnkrに移動しました(私はjsfiddleのファンではありません。plnkrを使用すると、必要に応じてファイルを作成できます。

まず、d3v3を使用していることに気づきました。最新の機能と改善を楽しむためにv4にアップグレードすることをお勧めします(ただし、これはトピック外です)。

次に、月ごとにデータのネストを作成するために、2行(102から107)を追加しました(例として)。

var byMonth = d3.nest()
    .key(function(d){
      return d.month;
    })
    .entries(data["BC"])
console.log(byMonth);

これで、オブジェクトbyMonthには、key既にマップした月の番号に対応するプロパティと、その月のvaluesすべての値を含むプロパティがあります。のようなものを使用してスケール範囲を作成/更新し、scale.range(byMonth.map(function(d){return d.key;})そのスケールを軸に使用して、それに応じてデータをプロットできるようになりました。同じ手法を日または年のプロパティに適用できます。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

mysqlデータベースを使用したd3の棒グラフ

分類Dev

D3積み上げ棒グラフのデータを更新しています

分類Dev

D3.jsを使用して棒グラフを作成するために複数のjsonからデータをフェッチする方法

分類Dev

D3データの更新時に前の棒グラフを削除する

分類Dev

React + D3:配列内のデータから棒グラフをレンダリングする

分類Dev

d3棒グラフの「塗りつぶし」を変更します

分類Dev

d3棒グラフの上にブラシを追加します

分類Dev

変数からのJSON情報を表示しないD3グラフ

分類Dev

可変長の新しいデータでd3棒グラフラベルを更新する

分類Dev

D3棒グラフの1つおきの列ラベルを削除します

分類Dev

選択されたノード、そのリンク、およびその子を、D3フォース有向グラフで強調表示します。

分類Dev

D3は配列からのデータを使用します

分類Dev

JavaScript、CSVを使用したD3棒グラフエラー

分類Dev

1桁しかないd3の対数棒グラフ

分類Dev

1桁しかないd3の対数棒グラフ

分類Dev

d3グラフのy軸にすべての月を正しく表示する

分類Dev

d3のデータの特定の行を抽出します

分類Dev

棒グラフで棒の平均を見つける-d3

分類Dev

データをcsvからD3の配列にコピーします

分類Dev

D3グラフをCMSのdivに挿入します

分類Dev

d3で棒グラフを更新して複数のグラフを生成する

分類Dev

d3で棒グラフを更新して複数のグラフを生成する

分類Dev

d3棒グラフのラベルが新しいデータでグラフを更新しても更新されない

分類Dev

D3棒グラフ-正/負の値を一緒に表示する方法は?

分類Dev

いいえを修正する方法。d3を使用した棒グラフのX軸の目盛りの数?

分類Dev

d3は誤った週の開始を返します

分類Dev

積み上げ棒グラフから棒グラフへのD3遷移は、初めてのみ機能します

分類Dev

D3棒グラフミラー

分類Dev

D3棒グラフの遷移が機能しない

Related 関連記事

  1. 1

    mysqlデータベースを使用したd3の棒グラフ

  2. 2

    D3積み上げ棒グラフのデータを更新しています

  3. 3

    D3.jsを使用して棒グラフを作成するために複数のjsonからデータをフェッチする方法

  4. 4

    D3データの更新時に前の棒グラフを削除する

  5. 5

    React + D3:配列内のデータから棒グラフをレンダリングする

  6. 6

    d3棒グラフの「塗りつぶし」を変更します

  7. 7

    d3棒グラフの上にブラシを追加します

  8. 8

    変数からのJSON情報を表示しないD3グラフ

  9. 9

    可変長の新しいデータでd3棒グラフラベルを更新する

  10. 10

    D3棒グラフの1つおきの列ラベルを削除します

  11. 11

    選択されたノード、そのリンク、およびその子を、D3フォース有向グラフで強調表示します。

  12. 12

    D3は配列からのデータを使用します

  13. 13

    JavaScript、CSVを使用したD3棒グラフエラー

  14. 14

    1桁しかないd3の対数棒グラフ

  15. 15

    1桁しかないd3の対数棒グラフ

  16. 16

    d3グラフのy軸にすべての月を正しく表示する

  17. 17

    d3のデータの特定の行を抽出します

  18. 18

    棒グラフで棒の平均を見つける-d3

  19. 19

    データをcsvからD3の配列にコピーします

  20. 20

    D3グラフをCMSのdivに挿入します

  21. 21

    d3で棒グラフを更新して複数のグラフを生成する

  22. 22

    d3で棒グラフを更新して複数のグラフを生成する

  23. 23

    d3棒グラフのラベルが新しいデータでグラフを更新しても更新されない

  24. 24

    D3棒グラフ-正/負の値を一緒に表示する方法は?

  25. 25

    いいえを修正する方法。d3を使用した棒グラフのX軸の目盛りの数?

  26. 26

    d3は誤った週の開始を返します

  27. 27

    積み上げ棒グラフから棒グラフへのD3遷移は、初めてのみ機能します

  28. 28

    D3棒グラフミラー

  29. 29

    D3棒グラフの遷移が機能しない

ホットタグ

アーカイブ