我试图通过鼠标点击获取x,y值。我成功获取了这些值,但它们在我的图表的宽度和高度范围内,而不是实际的x和y轴值。图表的宽度为600,高度为200.我使用以下方式获取点击次数:
var m = d3.mouse(this);
console.log(m);
对数值为x,y(x为0-600,y为0-200)。例如,点击可以返回 - 420,120
如何从此次点击中获取x轴和y轴值(日期和整数值)?
答案 0 :(得分:3)
您可以按如下方式检索坐标:
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.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="selected"></div>
答案 1 :(得分:0)
这有效,经过试验和测试:)
$('#chart').on('click', 'svg rect' ,function() {
var x= $(this)[0].__data__.x;
var y= $(this)[0].__data__.y;
});