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

描画自体は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の値を補正するようにしています。

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