Question

当光标在d3js条形图的条形图（'rect'）上时，我想让工具提示随光标一起移动。我将工具提示放在条形图中相应条形的顶部，并从代码中给出的.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>

	<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>

Answer 1

＆＃13;

<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; })
                .at`enter code here`tr('class', 'bar')
                .transition().duration(1500)
                .attr('y', function (d, i) { return y(d.y); })
                .attr('height', function (d, i) { return maxHeight - y(d.y); });
//****************ANSWER IS HERE***********************`enter code here`
            bars.select('rect')
                 .on('mousemove', function(event)
        		{
        			 tip.style("top", (d3.event.pageY - 51) + "px")
        			    .style("left", (d3.event.pageX - 51) + "px")
        			



        		}
        	)
        	.on('mouseover', tip.show)
  			.on('mouseout', tip.hide);	
//*******************UP TO Here********************	       

}
		
	render(inputData);	
	</script>

＆＃13;

<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;
}

＆＃13;

<body>
	<div class="chart-container">
		<svg class="chart">
    </svg>
	</div>

＆＃13;

在鼠标悬停时移动工具提示和光标

1 个答案: