var margin = {top: 20, right: 100, bottom: 30, left: 100},

    width = 960 - margin.left - margin.right,

    height = 500 - margin.top - margin.bottom;

​

var xScale = d3.scale.linear()

    .domain([0, 20])

    .range([0, width]);

​

var yScale = d3.scale.linear()

    .domain([0, 20])

    .range([height, 0]);

​

var xAxis = d3.svg.axis()

    .scale(xScale)

    .orient("bottom")

    .innerTickSize(-height)

    .outerTickSize(0)

    .tickPadding(10);

​

var yAxis = d3.svg.axis()

    .scale(yScale)

    .orient("left")

    .innerTickSize(-width)

    .outerTickSize(0)

    .tickPadding(10);

​

var width = width + margin.left + margin.right;

var height = height + margin.top + margin.bottom;

​

var svg = d3.select("body").append("svg")

    //.attr("width", width)

    //.attr("height", height)

    .attr('viewBox', '0 0 ' + width + ' ' + height)

  .append("g")

    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

​

  svg.append("g")

      .attr("class", "x axis")

      .attr("transform", "translate(0," + height + ")")

      .call(xAxis);

​

  svg.append("g")

      .attr("class", "y axis")

      .call(yAxis);

​

var line = {

    start: {x: 2, y: 3},

    finish: {x: 14, y: 6} 

  };

​

  svg.append('g')

    .append('line')

      .style('stroke', 'blue')

      .attr('class', 'line')

      .attr('x1', xScale(line.start.x))

      .attr('y1', yScale(line.start.y))

      .attr('x2', xScale(line.finish.x))

      .attr('y2', yScale(line.finish.y));

​

var lineData = [line.start, line.finish];

​

var drag = d3.behavior.drag()

    .origin(function(d) { return d; })

    .on("drag", dragMove);

​

var circles = svg.append('g').selectAll('circle')

     .data(lineData)

     .enter().append("circle")

     .attr('class', 'circle')

     .attr('cx', function(d){return xScale(d.x);})

     .attr('cy', function(d){return yScale(d.y);})

     .attr('r', 5)

     .style('fill', 'red')

     .call(drag);

​

var text = svg.append('g')

      .selectAll('text')

     .data(lineData)

     .enter().append('text')

     .attr("x", function(d){return xScale(d.x);})

     .attr("y", function(d){return yScale(d.y);})

     .text( function (d) { return "( " + xScale(d.x) + ", " + yScale(d.y) +" )"; })

     .attr("font-family", "sans-serif")

     .attr("font-size", "20px")

     .attr("fill", "red");

var radius = 20;

​

function dragMove(d) {

  d3.select('.circle')

      .attr("cx", d.x = d3.event.x)

      .attr("cy", d.y = d3.event.y);

}

​