問題タブ [stream-graph]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
5 に答える
10802 参照

r - Rのストリームグラフ?

Rにストリームグラフの実装はありますか?

Streamgraphs は積み上げグラフの変形であり、Havre 氏らの ThemeRiver をベースラインの選択方法、レイヤーの順序付け、および色の選択方法で改善したものです。

例:

ここに画像の説明を入力

参考: http: //www.leebyron.com/else/streamgraph/

0 投票する
1 に答える
811 参照

javascript - D3ストリームグラフレイヤーフェード機能

最近、この Streamgraph http://bl.ocks.org/1963983を見つけました。

ここに画像の説明を入力

その例のフェード機能を自分のストリームグラフに実装しようとしていますが、成功していません。

私のものは明らかに、その例のものよりもかなり複雑ではありません。アドバイスや提案をいただければ幸いです。

ありがとう。

0 投票する
1 に答える
2648 参照

javascript - ストリームグラフ d3.js への動的ツールチップの追加

私は現在ストリームグラフに取り組んでいます。このhttp://archive.stamen.com/mtvmovies-streamgraph/chart.htmlのような各レイヤーにツールチップを追加したいと思います

ここに画像の説明を入力

私が今持っているツールチップは、実際にはまったく機能しません。ツールチップ ボックスに表示されるのは「NaN」だけです。

助言がありますか??私のコードは以下です。

前もって感謝します。

0 投票する
1 に答える
685 参照

d3.js - D3 ストリームグラフの読み取り可能なラベル

完全に動的なデータを使用してレンダリングされる D3 Streamgraph に読み取り可能なラベルを適用しようとしています - ライブデータから時間の経過とともに進化しているさまざまな異なるデータセットと、表示されるものを操作するために提供されるコントロールも。これはすべてうまく機能します-問題は、ストリームを明確にラベル付けする方法です-凡例を使用することはできません。

必要な色相と輝度の大きなバリエーションにより、グラフ上に浮かぶラベルの読みやすいスタイルを選択することは非常に難しくなります。特に、クロス プラットフォームで使用できる SVG スタイルが限られている場合や、ラベルがバックグラウンドで必然的にオーバーラップする場合もあります。たとえば、黒色のラベルは「機能」しますが、暗い色の上では読みにくい場合があります (適切な範囲を確保する必要があります)...

誰かが同様のことをしたか、同じ課題に対処しましたか? 現在、代わりに凡例を使用することを検討しています。

0 投票する
1 に答える
329 参照

javascript - 更新ツールチップをストリームグラフに追加する

ストリームグラフがあり、次の例のように、マウスが各ストリームの上に置かれたときに表示されるツールチップを追加したいと考えています。

http://archive.stamen.com/mtvmovies-streamgraph/index.html

ここに画像の説明を入力

現時点では同様のことを行うツールチップがありますが、各ストリームの最初の値のみが表示されるため、ストリームのどこにカーソルを合わせても、開始値のみが表示されます。また、ツールチップは連続していないため、カーソルを移動するとツールチップが消えます

Heres私が今使っているコードです。

誰か提案やアドバイスはありますか??

0 投票する
2 に答える
1310 参照

javascript - D3ストリームグラフを新しいデータで更新する

ストリームグラフがあり、データを変更して更新したいと思います。データセット間を完全に遷移する折れ線グラフがあり、同じコードをストリームグラフに適合させようとしていますが、ほとんど成功していません。各ストリームの色は変更できますが、データは変更できません。

これが私の更新ライン機能です

これが私のストリームグラフの同じ関数での私の試みです...

色は変わりますが、値はグラフに渡されません。アドバイスや提案をいただければ幸いです!

0 投票する
1 に答える
2406 参照

javascript - d3ストリームグラフに新しいデータを追加するときの遷移

私はd3を使用して、公式の例http://bl.ocks.org/mbostock/4060954に非常によく似たストリームグラフを描画します。

ここに画像の説明を入力してください

唯一の違いは、新しいデータで更新する方法です。垂直(y値)遷移だけでなく、右側に新しいデータポイントを追加したい。グラフ全体が水平方向に圧縮されるはずです。

目的の結果を達成することは問題ありませんでした。唯一の問題は、2つの状態間の遷移が期待どおりに表示されないことです。

JSfiddleでの奇妙な遷移効果の最小限の例を見つけることができます: http://jsfiddle.net/jaYJ9/4/

更新ボタンを押して効果を確認してください

0 投票する
3 に答える
3871 参照

javascript - D3.js ストリームグラフの例 - 正しい面積関数値を生成する

私はd3jsが初めてで、ここからストリームグラフの例を適応させようとしていますhttp://bl.ocks.org/mbostock/4060954 :

ここに画像の説明を入力

...さまざまな場所 (オンライン、ゲストブック、美術館) から美術展への訪問者を追跡する独自のデータを操作するため。ある程度の進歩があり、データは正しい形式になっていると思いますが、最終的な y の値が非常に不安定で、例には何も表示されていません。

私のデータはcsvとして始まります:

次に、それを入れ子にして、会場 (オンライン、博物館、ゲストブック) ごとに 3 つのレイヤー/ストリームに整理します。

ページが生成されるとき、y 値は常に 800 で、svg パス オブジェクトは幅 1400px、高さ 0 を測定します。これが入力ドメインを出力範囲にスケーリングする方法の問題なのか、それとも面積関数が y 値を生成する方法の問題なのかはわかりません。生成されたパスの 1 つについて、ポイント値が示すもののサンプルを次に示します。

これが私の完全なページです-ここで簡単なものが欠けているように感じるので、いくつかのガイダンスを本当に感謝します.

そして、これがデータのcsvファイルです

ありがとう!