SOURCE

var data = [
    { name: "aa", x: 10, y: 10 },
    { name: "bb", x: 190, y: 90 }
];
document.oncontextmenu = function () {
    return false;
};
var link = [{
    source: {
        y: 10, x: 10
    },
    target: {
        y: 190, x: 90
    }
}];

var diagonal = d3.svg.diagonal()
    .projection(function (d) {
        console.log(d); return [d.y, d.x];
    });

var height = "100px";
var width = "200px";

var svg = d3.select("#testDom").append('svg')
    .attr("width", width)
    .attr("height", height);

var mapG = svg.append("g")
    .attr("width", width)
    .attr("height", height);

var circles = mapG.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("r", 4)
    .attr("fill", "#fff")
    .attr("cx", function (d) { return d.x })
    .attr("cy", function (d) { return d.y })

var lines = mapG.selectAll("path")
    .data(link)
    .enter()
    .append("path")
    .attr("stroke", "#fff")
    .attr("d", diagonal)
    .on("mousedown", function (d, e) {
        console.log(d + "***" + e + "***" + d3.event.button)
    });;

<div id="testDom">
  
</div>

#testDom{
  height:100px;
  width:200px;
  background:#000;
}