Frontend

WordPress管理画面にD3でグラフを描画する時のツールチップに関するTips

なんのことやらわからないようなタイトルですが、要はこういうことやりたい時の覚書です。 描画自体はD3.jsでSVGのグラフにツールチップを付ける方法3選の「CSSとマウスイベントを用いた方法」を使っています。 WordP […]

広告ここから
広告ここまで

なんのことやらわからないようなタイトルですが、要はこういうことやりたい時の覚書です。

D3でグラフを描いて、ツールチップで数値を観れるようにする

D3でグラフを描いて、ツールチップで数値を観れるようにする

描画自体はD3.jsでSVGのグラフにツールチップを付ける方法3選の「CSSとマウスイベントを用いた方法」を使っています。

WordPress管理画面だと起きるトラブル

で、さっきの記事のコードをそのままwp-adminページに入れればいいかというとそういうわけでもなく、ツールチップが明後日の方向に表示されます。

明後日の方向にチップを出してくる・・・

違う、そこじゃない

元記事のコードのままというか、event.pageXの値をそのままleftに使うとサイドバーの横幅分右に
出てしまう様子です。

ということでサイドバーが表示されている時は表示位置を補正するようにしておきます。
[javascript]
var tipMove = function(d) {
var X = event.pageX;
var sidePanel = jQuery(‘#adminmenuwrap’);
if ( ‘none’ != sidePanel.css( ‘display’ ) ) {
X -= sidePanel.width();
}
var Y = event.pageY – 20;
return tooltip.style( "top", Y + "px" ).style( "left" , X + "px" );
}

svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr({
x: 0,
y: function(d,i){ return i*30; },
width: function(d){ return d; },
height: 20,
fill: "green",
})
.on("mouseover", function(d){return tooltip.style("visibility", "visible").text(d);})
.on("mousemove", tipMove )
.on("mouseout", function(d){return tooltip.style("visibility", "hidden");})
[/javascript]

.on("mousemove"の部分を切り出してサイドバーが表示されている場合はサイドバーの横幅分leftの値を補正するようにしています。

今のところこれで問題なく動いている様子なので、覚書を残して様子見。

ブックマークや限定記事(予定)など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

広告ここから
広告ここまで

Related Category posts