0
當光標位於d3js barcharts的條（'rect'）上時，我想獲得隨光標一起移動的工具提示。 Iam將工具提示放置在條形圖中相應的條形圖的頂部，並從代碼中提供的.json對象中加載正確的數據。我試過，但我沒有得到如何獲取光標座標和將光標座標傳遞給d3 tooltip offset（）的正確解決方案。 任何人都可以在我的應用程序中使用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>
\t <script type="text/javascript">
\t \t var XPos=0;
\t \t var YPos=0;
\t \t
\t \t var inputData = [ {
\t \t \t x : "i20",
\t \t \t y : 1
\t \t }, {
\t \t \t x : "Tucson",
\t \t \t y : 37
\t \t }, {
\t \t \t x : "iLoad",
\t \t \t y : 16
\t \t }, {
\t \t \t x : "iMax",
\t \t \t y : 18
\t \t }, {
\t \t \t x : "Elantra",
\t \t \t y : 8
\t \t }, {
\t \t \t x : "Veloster",
\t \t \t y : 1
\t \t }, {
\t \t \t x : "i30",
\t \t \t y : 86
\t \t }, {
\t \t \t x : "iX35",
\t \t \t y : 7
\t \t }, {
\t \t \t x : "Accent",
\t \t \t y : 27
\t \t } ];
\t \t var svgHeight = 400;
\t \t var svgWidth = 400;
\t \t var maxY = 100; // You can also compute this from the data (y axis)
\t \t var barSpacing = 10; // The amount of space you want to keep between the bars
\t \t var padding = {
\t \t \t left : 50,
\t \t \t right : 0,
\t \t \t top : 20,
\t \t \t bottom : 20
\t \t };
\t \t function render(inputData)
\t \t {
\t \t \t
\t \t var svgHeight = 250;
\t \t var svgWidth = 700;
\t \t var maxY = 100; // You can also compute this from the data (y axis)
\t \t var barSpacing = 10; // The amount of space you want to keep between the bars
\t \t var padding = {
\t \t left: 50,
\t \t right: 0,
\t \t top: 20,
\t \t bottom: 20
\t \t };
\t \t var maxWidth = svgWidth - padding.left - padding.right;
\t \t var maxHeight = svgHeight - padding.top - padding.bottom;
\t \t //var x = d3.scale.ordinal().domain(inputData.map(function (d) {
\t \t // return d.x;
\t \t //})).rangeRoundBands([0, maxWidth]);
\t \t var x = d3.scale.ordinal().domain(inputData.map(function (d) {
\t \t return d.x;
\t \t })).rangeRoundBands([0, maxWidth], .3);
\t \t var y = d3.scale.linear().domain([0,
d3.max(inputData, function (d) {
return d.y;
})
\t \t ]).range([maxHeight, 0]);
\t \t var xAxis = d3.svg.axis().scale(x).orient('bottom');
\t \t var yAxis = d3.svg.axis().scale(y).orient('left');
\t \t var tip = d3.tip()
\t \t \t \t \t .attr('class', 'd3-tip')
\t \t \t \t \t .offset([YPos, XPos])
\t \t \t \t \t .html(function(d)
\t \t \t \t \t { \t \t \t \t \t \t
\t \t \t \t \t return "<strong>total:</strong> <span style='color:orange'>" +
\t \t \t \t \t d.y + "</span>";
\t \t \t \t \t })
\t \t var svg = d3.select('.chart').attr({
\t \t width: svgWidth,
\t \t height: svgHeight
\t \t });
\t \t \t
\t \t var chart = svg.append('g').attr(
{
transform: function (d, i) {
return 'translate(' + padding.left + ','
+ padding.top + ')';
}
});
\t \t chart.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + maxHeight + ')')
.call(xAxis)
.append("text")
\t \t .attr("x", maxWidth)
\t \t //.attr("y", 20)
.attr("dy", ".81em")
.style("text-anchor", "end")
.text("Model");
\t \t chart.append('g')
.attr('class', 'y axis')
.attr('height', maxHeight)
.call(yAxis)
.append("text")
\t \t .attr("transform", "rotate(-90)")
\t \t .attr("y", 6)
\t \t .attr("dy", ".71em")
\t \t .style("text-anchor", "end")
\t \t .text("Total");
\t \t var bars = chart.selectAll('g.bar-group')
\t \t \t \t .data(inputData)
\t \t \t \t .enter()
.append('g') // Container for the each bar
.attr({
transform: function (d, i) {
return 'translate(' + x(d.x) + ', 0)';
},
class: 'bar-group'
})
;
\t \t bars.call(tip);
\t \t 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)
\t {
\t \t XPos = event.clientX;
\t \t YPos = event.clientY;tip.show;
\t })
\t \t \t .on('mouseout', tip.hide);
}
\t \t
\t render(inputData); \t
\t </script><style type="text/css">
.chart rect {
\t fill: steelblue;
}
.chart rect:hover {
fill: blue;
opacity: 0.1;
}
.axis path, .axis line {
\t fill: none;
\t stroke: #000;
\t shape-rendering: crispEdges;
}
.axis text {
\t font-size: 12px;
}
.chart .current {
\t fill: green;
\t 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>
\t <div class="chart-container">
\t \t <svg class="chart">
</svg>
\t </div>