Question

这里我正在使用一个示例，我将获得click事件的x和y值。请查看这个小提琴：https://jsfiddle.net/NayanaDas/dxzmt7LL/1/。但现在我需要获得svg图像的所有4个角的X和Y值。那么如何在不使用click事件的情况下获取这些xy值？

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", 500);
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]);  

});

svg.append("svg:image")
   .attr('width', 500)
   .attr('height', 500)
   .attr("xlink:href","https://cdn1.iconfinder.com/data/icons/unique-round-blue/93/user-512.png")

d3.select('body').on('click', function(){
  log('scale X: '+  xScale.invert(d3.event.pageX) +" scale Y: "+ xScale.invert(d3.event.pageY));
})
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")
;

Answer 1

使用boundingClientRect

var clientRects = svg.select("image").node().getBoundingClientRect();

var coordinates = [
  [clientRects.left, clientRects.top],
  [clientRects.top, clientRects.right],
  [clientRects.bottom, clientRects.left],
  [clientRects.bottom, clientRects.right]
];

更新了fiddle

获取svg图像的4个角的所有xy坐标 - D3

1 个答案: