カーソルが d3js 棒グラフの棒 ('rect') にあるときに、ツールチップをカーソルと一緒に移動したいと思います。コードで指定された.jsonオブジェクトからロードされた正しいデータを使用して、バーチャートの対応するバーの上にツールチップを配置しています。試してみましたが、カーソル座標を取得してカーソル座標をd3ツールチップオフセット()に渡す方法について適切な解決策が得られませんでした。アプリケーションで動作する JavaScript で適切なコードを生成できる人はいますか? 前もって感謝します。
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script type="text/javascript">
var XPos=0;
var YPos=0;
var inputData = [ {
x : "i20",
y : 1
}, {
x : "Tucson",
y : 37
}, {
x : "iLoad",
y : 16
}, {
x : "iMax",
y : 18
}, {
x : "Elantra",
y : 8
}, {
x : "Veloster",
y : 1
}, {
x : "i30",
y : 86
}, {
x : "iX35",
y : 7
}, {
x : "Accent",
y : 27
} ];
var svgHeight = 400;
var svgWidth = 400;
var maxY = 100; // You can also compute this from the data (y axis)
var barSpacing = 10; // The amount of space you want to keep between the bars
var padding = {
left : 50,
right : 0,
top : 20,
bottom : 20
};
function render(inputData)
{
var svgHeight = 250;
var svgWidth = 700;
var maxY = 100; // You can also compute this from the data (y axis)
var barSpacing = 10; // The amount of space you want to keep between the bars
var padding = {
left: 50,
right: 0,
top: 20,
bottom: 20
};
var maxWidth = svgWidth - padding.left - padding.right;
var maxHeight = svgHeight - padding.top - padding.bottom;
//var x = d3.scale.ordinal().domain(inputData.map(function (d) {
// return d.x;
//})).rangeRoundBands([0, maxWidth]);
var x = d3.scale.ordinal().domain(inputData.map(function (d) {
return d.x;
})).rangeRoundBands([0, maxWidth], .3);
var y = d3.scale.linear().domain([0,
d3.max(inputData, function (d) {
return d.y;
})
]).range([maxHeight, 0]);
var xAxis = d3.svg.axis().scale(x).orient('bottom');
var yAxis = d3.svg.axis().scale(y).orient('left');
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([YPos, XPos])
.html(function(d)
{
return "<strong>total:</strong> <span style='color:orange'>" +
d.y + "</span>";
})
var svg = d3.select('.chart').attr({
width: svgWidth,
height: svgHeight
});
var chart = svg.append('g').attr(
{
transform: function (d, i) {
return 'translate(' + padding.left + ','
+ padding.top + ')';
}
});
chart.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + maxHeight + ')')
.call(xAxis)
.append("text")
.attr("x", maxWidth)
//.attr("y", 20)
.attr("dy", ".81em")
.style("text-anchor", "end")
.text("Model");
chart.append('g')
.attr('class', 'y axis')
.attr('height', maxHeight)
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Total");
var bars = chart.selectAll('g.bar-group')
.data(inputData)
.enter()
.append('g') // Container for the each bar
.attr({
transform: function (d, i) {
return 'translate(' + x(d.x) + ', 0)';
},
class: 'bar-group'
})
;
bars.call(tip);
bars.append('rect')
.attr('y', maxHeight)
.attr('height', 0)
.attr('width', function (d) { return x.rangeBand(d) - 1; })
.attr('class', 'bar')
.transition().duration(1500)
.attr('y', function (d, i) { return y(d.y); })
.attr('height', function (d, i) { return maxHeight - y(d.y); });
bars.select('rect')
.on('mouseover', tip.show)
.on('mousemove', function(event)
{
XPos = event.clientX;
YPos = event.clientY;tip.show;
})
.on('mouseout', tip.hide);
}
render(inputData);
</script><style type="text/css">
.chart rect {
fill: steelblue;
}
.chart rect:hover {
fill: blue;
opacity: 0.1;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
font-size: 12px;
}
.chart .current {
fill: green;
cursor: pointer;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}<body>
<div class="chart-container">
<svg class="chart">
</svg>
</div>