javascript - d3 get x, y values on click - Stack Overflow

admin管理员组

文章数量:1392095

I am trying to get the x, y values on a mouse click. I am successfully getting these values, but they are within the width and height of my chart and not the actual x and y axis values. The chart has a width of 600, and a height of 200. I am getting the click point using:

var m = d3.mouse(this);
console.log(m);

The log values are is x, y (x of 0-600, y of 0-200). For example, a click could return -- 420, 120

How do I get the x and y axis values (date and integer values) from this click?

I am trying to get the x, y values on a mouse click. I am successfully getting these values, but they are within the width and height of my chart and not the actual x and y axis values. The chart has a width of 600, and a height of 200. I am getting the click point using:

var m = d3.mouse(this);
console.log(m);

The log values are is x, y (x of 0-600, y of 0-200). For example, a click could return -- 420, 120

How do I get the x and y axis values (date and integer values) from this click?

• javascript
• d3.js

Share Improve this question Follow asked Jul 26, 2015 at 8:50 Michael RichterMichael Richter 5711 silver badge66 bronze badges 3

• How are you generating your chart? There should be some sort of top/bottom and left/right padding and scales for x and y axis you can use to figure out the x and y axis from the position. If you are lucky, the chart click event in the chart framework might even get the x and y. – potatopeelings Commented Jul 26, 2015 at 10:49
• d3.mouse returns pixel position, are you asking how to convert that into user-coordinate position? Generally this is done with invert but I can't be sure because you neeed to show a little more code... – Mark Commented Jul 26, 2015 at 13:59
• See this example. – Lars Kotthoff Commented Jul 26, 2015 at 18:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can retrieve co-ordinates as follows:

    d3.select('body').on('click', function(){
  log('msg is'+  xScale.invert(d3.event.pageX));
})

var w = 500;
var h = 100;
var dataset = [
    [5, 20],
    [480, 90],
    [250, 50],
    [100, 33],
    [330, 95],
    [410, 12],
    [475, 44],
    [25, 67],
    [85, 21],
    [220, 88]
];

var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function (d) {
    return d[0];
})])
    .range([0, w]);

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function (d) {
    return d[1];
})])
    .range([0, h]);

var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);
svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function (d) {
    return xScale(d[0]);
})
    .attr("cy", function (d) {
    return yScale(d[1]);
})
    .attr("r", function (d) {
    return Math.sqrt(h - d[1]);
}).on('click', function(d,i){
  log('x is '+ d[0] + 'y is '+ d[1]);  
 
});
d3.select('body').on('click', function(){
  log('msg is'+  xScale.invert(d3.event.pageX));
})
function log(msg){
   
 d3.select('#selected').html('<hr>' + '<br>' +msg + '<hr>');   
}
svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function (d) {
    return d[0] + "," + d[1];
})
    .attr("x", function (d) {
    return d[0];
})
    .attr("y", function (d) {
    return d[1];
})
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "red")
;

<script src="https://cdnjs.cloudflare./ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="selected"></div>

This works, tried and tested :)

$('#chart').on('click', 'svg rect' ,function() {
        var x= $(this)[0].__data__.x;
        var y= $(this)[0].__data__.y;
        });

本文标签： javascriptd3 get xy values on clickStack Overflow