svgイメージの4つのコーナーのすべてのxy座標を取得 - D3

Question

ここでは、私はクリックイベントでxとyの値を取得する例で作業しています。このフィドルを確認してください：https://jsfiddle.net/NayanaDas/dxzmt7LL/1/しかし、今私はsvg画像のすべての4つのコーナーのXとYの値を取得する必要があります。では、クリックイベントを使用せずにこれらの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] 
]; 

ページ座標をしたい場合です