Detecting click location

Question

I'm attempting to display something (ultimately a menu) when a point is clicked in a DevExtreme chart. I've started by using a bar chart for simplicity.

What I want to do is, when the user clicks on a bar to display something else in the DOM at that particular point. I've tried to set this up and got most of the way, the problem I've got that I'm not sure how to solve is regarding the co-ordinates.

The example above shows where I clicked, and the red circle that I've appended which appears at the top of the bar. The code to add this is quite simple:

var clicked = function(p) {
 var element = p.element[0];
 var group = d3.select(element)
             .select("svg")
               .append("g")
               .attr("transform", "translate("+ [p.target.x, p.target.y] +")")
               .append("circle")
               .attr({ cx : 0, cy: 0, r: 10, class: "circle"});
};

Simply taking the co-ordinates of the target clicked element. Obviously this seems to be the top corner. Is there any way that anyone can think of to obtain the actual clicked location?

I've got a demonstration fiddle forked off one of their examples here: http://jsfiddle.net/IPWright83/ho2euurh/2/

Answer 1

Try this fiddle:

  .attr("transform", "translate("+ [p.jQueryEvent.pageX, p.jQueryEvent.pageY] +")")

This gives you the coordinates of the clicked location.