私はprotovisが初めてで、問題を抱えています。
テーブルのデータを使用してprotovisで作成されたデータと棒グラフを含むhtmlテーブルがあります。今私が欲しいのは、マウスがその特定の行に乗っているときに個々のバーの色を変更することです。
誰でもそれを行う方法を教えてもらえますか? 前もって感謝します。
私はprotovisが初めてで、問題を抱えています。
テーブルのデータを使用してprotovisで作成されたデータと棒グラフを含むhtmlテーブルがあります。今私が欲しいのは、マウスがその特定の行に乗っているときに個々のバーの色を変更することです。
誰でもそれを行う方法を教えてもらえますか? 前もって感謝します。
ここで実用的な例を設定しました。ProtovisはHTMLテーブルにイベントハンドラーを設定できないため、Protovisだけを使用して要求していることを実行することはできません。これを実現するには、通常、次のことを行う必要があります。
Protovisコード(この場合はfillStyle
)で変更するビジュアルパラメーターを、状態変数をチェックする関数に設定します。
.fillStyle(function(d) { return hilighted == d.name ? "orange" : "blue" });
状態変数を変更してvisを再レンダリングするイベントハンドラーをHTMLテーブルに設定します(タグがこれも使用していることを示しているため、jQueryを使用しました)。
jQueryの場合:
$('#myTable tr').mouseover(function() {
// set the state variable
hilighted = $(this).data('name');
// re-render the vis
vis.render();
});
これを行う方法は他にもありますが、これは一般的に最も簡単です。ページの他の部分が関係するインタラクションの場合、Protovisコードの外部の別の変数に状態を保持することをお勧めします。
私はこれまでProtovisを使用したことがありませんが、インタラクションのドキュメントから、オブジェクトに次のようなものを追加することで使用できるようになります。
.event("mouseover", function() this.fillStyle("orange")) // override
.event("mouseout", function() this.fillStyle(undefined)) // restore