D3 - get x position on mouseover [duplicate]











up vote
1
down vote

favorite













This question already has an answer here:




  • d3 v4 retrieve drag DOM target from drag callback when `this` is not available

    1 answer




I have a plunker here - https://plnkr.co/edit/iOGJUosvruW9KV1FF9lp?p=preview



On mouseover of the bars I want to show a tooltip



At the moment it move with the mouse but I want it to be a set position above the bars I'm over.



How do I get the x and y position of the bar I'm over



I have tried, but I get errors.



console.log(d3.mouse(this)[0]); 









share|improve this question













marked as duplicate by Gerardo Furtado d3.js
Users with the  d3.js badge can single-handedly close d3.js questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 8 at 22:34


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















    up vote
    1
    down vote

    favorite













    This question already has an answer here:




    • d3 v4 retrieve drag DOM target from drag callback when `this` is not available

      1 answer




    I have a plunker here - https://plnkr.co/edit/iOGJUosvruW9KV1FF9lp?p=preview



    On mouseover of the bars I want to show a tooltip



    At the moment it move with the mouse but I want it to be a set position above the bars I'm over.



    How do I get the x and y position of the bar I'm over



    I have tried, but I get errors.



    console.log(d3.mouse(this)[0]); 









    share|improve this question













    marked as duplicate by Gerardo Furtado d3.js
    Users with the  d3.js badge can single-handedly close d3.js questions as duplicates and reopen them as needed.

    StackExchange.ready(function() {
    if (StackExchange.options.isMobile) return;

    $('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
    var $hover = $(this).addClass('hover-bound'),
    $msg = $hover.siblings('.dupe-hammer-message');

    $hover.hover(
    function() {
    $hover.showInfoMessage('', {
    messageElement: $msg.clone().show(),
    transient: false,
    position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
    dismissable: false,
    relativeToBody: true
    });
    },
    function() {
    StackExchange.helpers.removeMessages();
    }
    );
    });
    });
    Nov 8 at 22:34


    This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

















      up vote
      1
      down vote

      favorite









      up vote
      1
      down vote

      favorite












      This question already has an answer here:




      • d3 v4 retrieve drag DOM target from drag callback when `this` is not available

        1 answer




      I have a plunker here - https://plnkr.co/edit/iOGJUosvruW9KV1FF9lp?p=preview



      On mouseover of the bars I want to show a tooltip



      At the moment it move with the mouse but I want it to be a set position above the bars I'm over.



      How do I get the x and y position of the bar I'm over



      I have tried, but I get errors.



      console.log(d3.mouse(this)[0]); 









      share|improve this question














      This question already has an answer here:




      • d3 v4 retrieve drag DOM target from drag callback when `this` is not available

        1 answer




      I have a plunker here - https://plnkr.co/edit/iOGJUosvruW9KV1FF9lp?p=preview



      On mouseover of the bars I want to show a tooltip



      At the moment it move with the mouse but I want it to be a set position above the bars I'm over.



      How do I get the x and y position of the bar I'm over



      I have tried, but I get errors.



      console.log(d3.mouse(this)[0]); 




      This question already has an answer here:




      • d3 v4 retrieve drag DOM target from drag callback when `this` is not available

        1 answer








      d3.js






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 8 at 9:34









      ttmt

      1,954114994




      1,954114994




      marked as duplicate by Gerardo Furtado d3.js
      Users with the  d3.js badge can single-handedly close d3.js questions as duplicates and reopen them as needed.

      StackExchange.ready(function() {
      if (StackExchange.options.isMobile) return;

      $('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
      var $hover = $(this).addClass('hover-bound'),
      $msg = $hover.siblings('.dupe-hammer-message');

      $hover.hover(
      function() {
      $hover.showInfoMessage('', {
      messageElement: $msg.clone().show(),
      transient: false,
      position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
      dismissable: false,
      relativeToBody: true
      });
      },
      function() {
      StackExchange.helpers.removeMessages();
      }
      );
      });
      });
      Nov 8 at 22:34


      This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.






      marked as duplicate by Gerardo Furtado d3.js
      Users with the  d3.js badge can single-handedly close d3.js questions as duplicates and reopen them as needed.

      StackExchange.ready(function() {
      if (StackExchange.options.isMobile) return;

      $('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
      var $hover = $(this).addClass('hover-bound'),
      $msg = $hover.siblings('.dupe-hammer-message');

      $hover.hover(
      function() {
      $hover.showInfoMessage('', {
      messageElement: $msg.clone().show(),
      transient: false,
      position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
      dismissable: false,
      relativeToBody: true
      });
      },
      function() {
      StackExchange.helpers.removeMessages();
      }
      );
      });
      });
      Nov 8 at 22:34


      This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.


























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          2
          down vote













          As explained in MDN:




          An arrow function expression has a shorter syntax than a function
          expression and does not have its own this, arguments, super, or
          new.target. These function expressions are best suited for non-method
          functions, and they cannot be used as constructors.




          Arrow functions are introduced to be pure functions, and that's the reason why they don't have this kind of context variables.



          Just convert the arrow function to a regular one. I forked your plunker:



          https://plnkr.co/edit/3Y4T0JZ42eH2wb42tpsg?p=preview



          d3.selectAll('.bar').on("mouseover", function(){
          console.log(d3.mouse(this)[0]);
          d3.select('.chart-tooltip').style("display", null)
          })


          UPDATE:



          You can also replace this with the global d3.event.target and keep the function as an arrow function.



          d3.selectAll('.bar').on("mouseover", () => {
          console.log(d3.mouse(d3.event.target)[0]);
          d3.select('.chart-tooltip').style("display", null)
          })


          UPDATE II:



          Gerardo Furtado proposed to use the third argument of the callback to get the html element. Also a good solution, as d3.event can be problematic in certain situations.



          d3.selectAll('.bar').on("mouseover", (datum,index,elements) => {
          console.log(d3.mouse(elements[index])[0]);
          d3.select('.chart-tooltip').style("display", null)
          })





          share|improve this answer























          • +1, but d3.event.target is not a good alternative for arrow functions, see my answer here: stackoverflow.com/a/42667743/5768908. Just use the third and second arguments.
            – Gerardo Furtado
            Nov 8 at 22:37












          • @GerardoFurtado updated!
            – David Lemon
            yesterday




















          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          2
          down vote













          As explained in MDN:




          An arrow function expression has a shorter syntax than a function
          expression and does not have its own this, arguments, super, or
          new.target. These function expressions are best suited for non-method
          functions, and they cannot be used as constructors.




          Arrow functions are introduced to be pure functions, and that's the reason why they don't have this kind of context variables.



          Just convert the arrow function to a regular one. I forked your plunker:



          https://plnkr.co/edit/3Y4T0JZ42eH2wb42tpsg?p=preview



          d3.selectAll('.bar').on("mouseover", function(){
          console.log(d3.mouse(this)[0]);
          d3.select('.chart-tooltip').style("display", null)
          })


          UPDATE:



          You can also replace this with the global d3.event.target and keep the function as an arrow function.



          d3.selectAll('.bar').on("mouseover", () => {
          console.log(d3.mouse(d3.event.target)[0]);
          d3.select('.chart-tooltip').style("display", null)
          })


          UPDATE II:



          Gerardo Furtado proposed to use the third argument of the callback to get the html element. Also a good solution, as d3.event can be problematic in certain situations.



          d3.selectAll('.bar').on("mouseover", (datum,index,elements) => {
          console.log(d3.mouse(elements[index])[0]);
          d3.select('.chart-tooltip').style("display", null)
          })





          share|improve this answer























          • +1, but d3.event.target is not a good alternative for arrow functions, see my answer here: stackoverflow.com/a/42667743/5768908. Just use the third and second arguments.
            – Gerardo Furtado
            Nov 8 at 22:37












          • @GerardoFurtado updated!
            – David Lemon
            yesterday

















          up vote
          2
          down vote













          As explained in MDN:




          An arrow function expression has a shorter syntax than a function
          expression and does not have its own this, arguments, super, or
          new.target. These function expressions are best suited for non-method
          functions, and they cannot be used as constructors.




          Arrow functions are introduced to be pure functions, and that's the reason why they don't have this kind of context variables.



          Just convert the arrow function to a regular one. I forked your plunker:



          https://plnkr.co/edit/3Y4T0JZ42eH2wb42tpsg?p=preview



          d3.selectAll('.bar').on("mouseover", function(){
          console.log(d3.mouse(this)[0]);
          d3.select('.chart-tooltip').style("display", null)
          })


          UPDATE:



          You can also replace this with the global d3.event.target and keep the function as an arrow function.



          d3.selectAll('.bar').on("mouseover", () => {
          console.log(d3.mouse(d3.event.target)[0]);
          d3.select('.chart-tooltip').style("display", null)
          })


          UPDATE II:



          Gerardo Furtado proposed to use the third argument of the callback to get the html element. Also a good solution, as d3.event can be problematic in certain situations.



          d3.selectAll('.bar').on("mouseover", (datum,index,elements) => {
          console.log(d3.mouse(elements[index])[0]);
          d3.select('.chart-tooltip').style("display", null)
          })





          share|improve this answer























          • +1, but d3.event.target is not a good alternative for arrow functions, see my answer here: stackoverflow.com/a/42667743/5768908. Just use the third and second arguments.
            – Gerardo Furtado
            Nov 8 at 22:37












          • @GerardoFurtado updated!
            – David Lemon
            yesterday















          up vote
          2
          down vote










          up vote
          2
          down vote









          As explained in MDN:




          An arrow function expression has a shorter syntax than a function
          expression and does not have its own this, arguments, super, or
          new.target. These function expressions are best suited for non-method
          functions, and they cannot be used as constructors.




          Arrow functions are introduced to be pure functions, and that's the reason why they don't have this kind of context variables.



          Just convert the arrow function to a regular one. I forked your plunker:



          https://plnkr.co/edit/3Y4T0JZ42eH2wb42tpsg?p=preview



          d3.selectAll('.bar').on("mouseover", function(){
          console.log(d3.mouse(this)[0]);
          d3.select('.chart-tooltip').style("display", null)
          })


          UPDATE:



          You can also replace this with the global d3.event.target and keep the function as an arrow function.



          d3.selectAll('.bar').on("mouseover", () => {
          console.log(d3.mouse(d3.event.target)[0]);
          d3.select('.chart-tooltip').style("display", null)
          })


          UPDATE II:



          Gerardo Furtado proposed to use the third argument of the callback to get the html element. Also a good solution, as d3.event can be problematic in certain situations.



          d3.selectAll('.bar').on("mouseover", (datum,index,elements) => {
          console.log(d3.mouse(elements[index])[0]);
          d3.select('.chart-tooltip').style("display", null)
          })





          share|improve this answer














          As explained in MDN:




          An arrow function expression has a shorter syntax than a function
          expression and does not have its own this, arguments, super, or
          new.target. These function expressions are best suited for non-method
          functions, and they cannot be used as constructors.




          Arrow functions are introduced to be pure functions, and that's the reason why they don't have this kind of context variables.



          Just convert the arrow function to a regular one. I forked your plunker:



          https://plnkr.co/edit/3Y4T0JZ42eH2wb42tpsg?p=preview



          d3.selectAll('.bar').on("mouseover", function(){
          console.log(d3.mouse(this)[0]);
          d3.select('.chart-tooltip').style("display", null)
          })


          UPDATE:



          You can also replace this with the global d3.event.target and keep the function as an arrow function.



          d3.selectAll('.bar').on("mouseover", () => {
          console.log(d3.mouse(d3.event.target)[0]);
          d3.select('.chart-tooltip').style("display", null)
          })


          UPDATE II:



          Gerardo Furtado proposed to use the third argument of the callback to get the html element. Also a good solution, as d3.event can be problematic in certain situations.



          d3.selectAll('.bar').on("mouseover", (datum,index,elements) => {
          console.log(d3.mouse(elements[index])[0]);
          d3.select('.chart-tooltip').style("display", null)
          })






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited yesterday

























          answered Nov 8 at 10:31









          David Lemon

          724516




          724516












          • +1, but d3.event.target is not a good alternative for arrow functions, see my answer here: stackoverflow.com/a/42667743/5768908. Just use the third and second arguments.
            – Gerardo Furtado
            Nov 8 at 22:37












          • @GerardoFurtado updated!
            – David Lemon
            yesterday




















          • +1, but d3.event.target is not a good alternative for arrow functions, see my answer here: stackoverflow.com/a/42667743/5768908. Just use the third and second arguments.
            – Gerardo Furtado
            Nov 8 at 22:37












          • @GerardoFurtado updated!
            – David Lemon
            yesterday


















          +1, but d3.event.target is not a good alternative for arrow functions, see my answer here: stackoverflow.com/a/42667743/5768908. Just use the third and second arguments.
          – Gerardo Furtado
          Nov 8 at 22:37






          +1, but d3.event.target is not a good alternative for arrow functions, see my answer here: stackoverflow.com/a/42667743/5768908. Just use the third and second arguments.
          – Gerardo Furtado
          Nov 8 at 22:37














          @GerardoFurtado updated!
          – David Lemon
          yesterday






          @GerardoFurtado updated!
          – David Lemon
          yesterday





          Popular posts from this blog

          Guess what letter conforming each word

          Port of Spain

          Run scheduled task as local user group (not BUILTIN)