svg 이미지 - D3

Question

네 모서리의 모든 xy 좌표를 가져옵니다. 여기서 나는 click 이벤트에서 x 및 y 값을 얻을 수있는 예제를 사용하고 있습니다. 이 바이올린을 확인하십시오 : https://jsfiddle.net/NayanaDas/dxzmt7LL/1/. 하지만 이제는 svg 이미지의 모든 네 구석의 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] 
]; 

이 페이지 좌표를 원하는 경우입니다