How to get a line from couple of coordinates to another couple of them in a D3.js TopoJSON map

Question

I'm using D3.js with a TopoJSON map of the United States. I've generated JSON files holding information regarding counties, cities (represented as points) and some other stuff, but I cannot get lines to work properly.

What I'm trying to do, based on the following code, is to link two points of the map by a line via their coordinates. The first two represent the origin city, while the two at last represent a college, the desired destination of the line.

{ "type": "Feature", "id":5, "geometry": { "type": "LineString", "coordinates": [[ -83.150823, 42.239933 ], [ -83.738219, 42.277857 ]]}, "properties": { "OBJECTID": 5, "city": "Detroit", "college": "University of Michigan"}}

While porting this JSON to a .js script which draws the shapes in a SVG, I use the following code.

  var lineFunction = d3.svg.line()
                        .x(function(d) { return d.x; })
                        .y(function(d) { return d.y; })
                        .interpolate("linear");

  svg.selectAll('.links')
  .data(lines.features)
  .enter().append('path')
  .attr("class", "link")
  .attr("d", function(d){

    var lineData = [ { "x": d.geometry.coordinates[0][0], "y": d.geometry.coordinates[0][1]},
                     { "x": d.geometry.coordinates[1][0], "y": d.geometry.coordinates[1][1]} ];

    return lineFunction(lineData);

  })
  .attr("stroke", "blue")
  .attr("stroke-width", function(d){
      return 2;
  })
  .attr("fill", "none")
  .attr('transform', function(d) {

    return "translate(" + projection([d.geometry.coordinates[0][0],d.geometry.coordinates[0][1]]) + ")"; })

Rather simple. Pick every "link" in the JSON, and build a line that gets appended to the SVG. The process work but the outcome is not as we should expect. To simplify what is happening, the next image shows the outcome of using different coordinates in the JSON for the cities, but always [10,10] for the colleges, which should give us a map full of lines going towards the same point. Instead of that, we get some kind of "relative" lines, moving from the origin (which I have to say is not even in the point it should, even having the same coordinates of the circle -city- which represents it) to a point probably [10,10] out of itself.

So I've been trying things but I cannot get the lines to converge into a point using the same destination coordinates for all, not to mention if I use the real coordinates, with disastrous results. What am I missing? Maybe applying some projection to the lines? And what about the lines not starting in the point there should be positioned (above the city represented by a circle)?

Edit:

I get to make the lines start in the point they should by doing a little trick, which is no more than get the X and Y point where the circle (city) they are supposed to start is positioned.

  .attr("x1", function(d){ return d3.selectAll(".city."+d.properties.city+"."+d.properties.state).attr("cx");})
  .attr("y1", function(d){ return d3.selectAll(".city."+d.properties.city+"."+d.properties.state).attr("cy");})

The problem remains on the destination point. My so called "colleges" are made as SVG rectangles, with no position X and Y given, because I use a translation and projection function which obtains the X and Y from me just passing them the real world [lon,lat] coordinates of the college. Is there any way to obtain the X and Y of a rectangle on an SVG canvas, so I can apply something similar to what I did with the origin points (see code next, which by the way is not working, obviously as the shapes doesn't not have the X and Y attributes)?

  .attr("x2", function(d){ return d3.selectAll(".college."+d.properties.college).attr("x");})
  .attr("y2", function(d){ return d3.selectAll(".college."+d.properties.college).attr("y");})

Thanks in advance for the advices!