Переместить подсказку вместе с курсором при наведении курсора

Question

Переместить подсказку вместе с курсором при наведении курсора

Я хотел бы, чтобы подсказка перемещалась вместе с курсором, когда курсор находится на полосах ('rect') столбцов d3js. Я помещаю всплывающую подсказку поверх соответствующих столбцов в диаграмме с правильными данными, загруженными из объектов.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>

0

jquery-tooltip onmousemove

Источник

user5414583 06 окт '15 в 15:18

1 ответ

Другие вопросы по тегам jquery-tooltip onmousemove

user5414583 07 окт '15 в 09:57 2015-10-07 09:57 · Answer 1 · 2015-10-07 09:57

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

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