問題タブ [vivagraphjs]

グラフ ノードに mouseclick イベントを挿入する必要がありますが、どの方法でもうまくいきません。

グラフを作成した私のコードは次のとおりです。

マウスオーバーイベントを行うために使用されるこのような多くの方法を試しました

グラフを作成するためにVivaGraph.jsを使用しています

いくつかの解決策？

i am developing a social network visualization component. I am using the Vivagraph library, but when I add nodes that are not connected to another node, the graph goes outside of the container. Here is my implementation. Please help, this is very important to me.

This is my javascript file.

vivagraph を使用して div に (背景として) svg を埋め込むと正常に動作しますが、vivagraph はインタラクション (スクロール ズーム) を提供します。

eventlistner を svg に結びつけ、そこで無効にしようとしました。

「下にスクロールするだけでsvgとやり取りしないでください」と言う簡単な方法はありませんか?

ありがとう

を実装しようとしていますvivagraph。ただし、常に右下隅のどこかにグラフ全体が表示されます。firebug からg tagは、多くの行列変換が行われているようです。

問題は、ページのビューごとにノードを動的に増減させるため、1 つの single でそれをオーバーライドできないことtranslateです。それで、それを行う方法はありますか？

私は自分自身を大きくて奇妙な立場に陥らせました。ブラウザで概念グラフを描画するためにVivaGraph JSを使用しています。私が使用している特定の実装は SVG に依存しているため、メインのグラフ DOM 要素は SVG です。

ノード間のエッジの作成中に、HTML5 のキャンバスを使用するPaper.JSを使用して小さなコードを書きました。実際、私はvektor.jsが提供するソース コードをハックして、 CTRL+MouseDown イベントをリッスンするように単純に変更しました。

これら 2 つの要素、svg グラフとキャンバスは重なり合っており、まったく同じ寸法になっています。グラフには、マウスとキーボードのイベントをリッスンする操作されたノードとエッジがあり、悲しいことに私のキャンバスもそうです。

実際、キャンバスを使用する理由は、実際に作成する前に、作成されるエッジが何であるかをユーザーに示すために、マウスの移動中に線 (ベクトル、エッジ、またはアーク) を描画したかったからです。グラフのエッジ。

私は SVG を使用してこれを行うことができませんでした (はい、できるはずです)。

残念なことに、これらの DOM 要素が表示される順序に応じて、キャンバスがイベントをキャプチャしてグラフが役に立たなくなるか、グラフがすべてのイベントをキャプチャしてキャンバスが役に立たなくなるかのいずれかになります。

両方の DOM 要素に透過性を追加する方法はありますか?

グラフのイベント リスナーは VivaGraphJS に組み込まれており、Paper Vertex のイベント リスナーは Paper.JS に組み込まれています。

理想的には、グラフを一番上に置き、イベントをキャプチャしてからキャンバスに戻して、矢印が描画されるようにしたいと考えています。純粋な JavaScript を介して、または jQuery を使用して、これを実行できるはずだと感じています。

これまでのところ、グラフに記録されたイベントは次のようになります。

これはすべて、1 つのファイル graph.js で行われます。別のファイル edge.js では、イベント リスナーとベクトルの描画方法をセットアップします。私はそれをjsfiddleに追加しましたが、残念ながらそこでは実行されません(キーボードイベントが適切に伝播されない可能性があると思いますか?)。

問題は、Paper.Js に独自のイベント リスナーがあることです。

もちろん、これらのイベントは純粋な JavaScript と jQuery に同等のものがありますが、VivaGraphJS ま​​たは jQuery でキャプチャしたイベントは、異なるオブジェクトであるため、PaperJS に伝達できません。

では、どういうわけか (できれば純粋な JavaScript を使用しますが、jQuery も機能します)、これらのイベントをエミュレートしたり、Paper.JS に送信したりできますか?

これは私が解決しなければならない要件なので、他の人のために使用したソリューションを投稿すると思いました。

VivaGraph SVG レンダリングを PNG として保存できるボタンが必要でした。

ノードのデータをグラフに非同期的に入力しようとしています。

非同期にフェッチされたデータが実際にグラフにバインドされ、準備ができたらレンダリングされるようにするにはどうすればよいですか?

まず、グラフ構造、ノード、およびリンクをレンダリングします。次に、データの準備ができたら、データをノードのプロパティとしてレンダリングします。新しいノードは、親のノードと対話することによって動的に追加でき、ノードのプロパティの完了を待ちたくありません。

Vivagraph.js ライブラリを使用していることに注意してください。graphはライブラリで作成されたオブジェクトでaddLinks()ありgetNode()、その関数のプロパティです - Vivagraph demoのデモを参照してください。私はそれを私の試みの下書きとして使用しています。

私が経験した問題は、ノードが追加されるとすぐにノードがグラフにレンダリングされることです - addNode()またはaddLinks(node1, node2)関数 - 一方、ノードのプロパティは非同期的にフェッチされます - getNode(node).property = updatedValue - 結果はundefinedです。

EDITED -コメントに基づく簡略化されたコード

以下に、この (素晴らしい) ライブラリの作成者である @Anvaka が提供するチュートリアルに基づいた、実用的なモックアップ バージョンを含めます。

私の目標は、グラフをすぐにレンダリングして対話を可能にし、サード パーティから取得している間にデータを更新することです。

線の太さのデフォルト値を変更する方法はありますか?

残念ながら、回線の仕様を動的に変更する方法はありません。色のみ変更可能です。しかし、誰かが線の太さを変更する方法を知っていれば、それは非常に役に立ちます.

いくつかのグラフをレンダリングするために Vivagraph JS ライブラリを使用しています。

このようにノードの色を変更したいと思います

nodeUI.color = 0xFFA500FF;

^ これはランダムな例です。以下の RGB に対応する 16 進数値ではありません

このような配列としてサーバーのRGB値から取得します

rgb = [229,64,51]

RGB を上記の 16 進数型の値に変換するにはどうすればよいですか?

ありがとう