Plotly_click returns 0 on graph

Question

I´ve implemented the code of a Plotly onclick-method mentioned on Plotly.js create a point on click, but on my PCs the clickmethod don´t works perfectly. The problem is, that if I click on the graph, e.layerX and e.layerY return 0. The code in the movemethod works perfect, even though it´s pretty much the same as in the clickmethod. Here is my Code:

var maxXGraph = 24;
var maxYGraph = 36;

var touchobj;
var lastTouchDownXY = [0, 0];

var xValueArray = ['0.25', '12.25', '22.23'];
var yValueArray = [1, 3, 35];

var data = [ {
    x: xValueArray,
    y: yValueArray,
    type: 'scatter'
}];

var layout = {
    hovermode: 'closest',
  xaxis: {
    autorange: true,
    range: [0, maxXGraph],
    type: 'linear'
  },
  yaxis: {
    autorange: true,
    range: [0, maxYGraph],
    type: 'linear'
 }
};

Plotly.newPlot('myChart', data, layout);
var graph = document.getElementById('myChart');

Number.prototype.between = function(min, max) {
  return this >= min && this <= max;
};

Plotly.d3.select(".plotly").on('click', function(d, i) {
    var e = Plotly.d3.event;
    var bg = document.getElementsByClassName('bg')[0];
    alert(e.layerX);    //returns 0 on graph
    alert(e.layerY);    //returns 0 on graph
    var x = ((e.layerX - bg.attributes['x'].value + 4)/
    (bg.attributes['width'].value)) * (graph.layout.xaxis.range[1] -
    graph.layout.xaxis.range[0]) + graph.layout.xaxis.range[0];
    var y = ((e.layerY - bg.attributes['y'].value + 4) / 
    (bg.attributes['height'].value)) * (graph.layout.yaxis.range[0] -
    graph.layout.yaxis.range[1]) + graph.layout.yaxis.range[1];

    if (x.between(graph.layout.xaxis.range[0], 
        graph.layout.xaxis.range[1]) &&
        y.between(graph.layout.yaxis.range[0], 
        graph.layout.yaxis.range[1])) {
         xValueArray.push(x);
         yValueArray.push(y);
   }

   data = [ {
      x: xValueArray,
      y: yValueArray,
      type: 'scatter'
   }];
   Plotly.newPlot('myChart', data, layout);
});

Plotly.d3.select(".plotly").on('mousemove', function(d, i) {
  var e = Plotly.d3.event;
  var bg = document.getElementsByClassName('bg')[0];

  var x = ((e.layerX - bg.attributes['x'].value + 4) / 
  (bg.attributes['width'].value)) * (graph.layout.xaxis.range[1] -
  graph.layout.xaxis.range[0]) + graph.layout.xaxis.range[0];
  var y = ((e.layerY - bg.attributes['y'].value + 4) / 
  (bg.attributes['height'].value)) * (graph.layout.yaxis.range[0] - 
  graph.layout.yaxis.range[1]) + graph.layout.yaxis.range[1];

  if (x.between(graph.layout.xaxis.range[0], graph.layout.xaxis.range[1])
  && y.between(graph.layout.yaxis.range[0], graph.layout.yaxis.range[1]))    
  {
     console.log("Location X:"+x+" Y"+y)
     document.getElementById("xvalue").value = x;
     document.getElementById("yvalue").value = y;
  }
});

Have anybody the same problem or event better, a solution.

Thank you in advance