Get scale X and Y onclick - D3 svg

by Nayana Das

HTML

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

CSS

body{
  margin: 0px;
}

JavaScript

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('x', 50)
  .attr('y', 50)
  .attr('width', 200)
  .attr('height', 200)
  .attr("xlink:href", "https://cdn1.iconfinder.com/data/icons/unique-round-blue/93/user-512.png");


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]
];

console.log("image 4 corner - xy cordinates: "+coordinates);

svg.selectAll(".node")
  .data(coordinates)
  .enter()
  .append("circle")
  .style("fill", "green")
  .style("stroke", "gold")
    .style("stroke-width", "2.5")
  .attr("r", 8)
  .attr("cx", function(d, i) {
    return d[0];
  })
  .attr("cy", function(d, i) {
    return d[1];
  });

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];
  })
 ...