D3.js: Orientation markers won't work. Radial lines to blame?

Question

I am working on a project using D3, specifically the bundle layout.

I was asked by my supervisor to add directionality to my graph, using arrows. When I tried to implement this using markers, all of my arrow heads pointed to the right, and did not orient themselves to the path they were associated with.

I have tried to work out the problem by looking at other examples with no luck. The only thing I can come up with is that "orient = auto" does not work with radial lines, since all of the examples I've seen use diagonal or bezier lines.

Can any one confirm this, or point me in the right direction? I have limited experience with d3 and svg so I am hoping that there is a simple solution, and that I don't have to rebuild this from scratch. If marker orientation doesn't work with radial lines, can a similar curved line effect be achieved in bundle using Bezier curves?

My Marker creation:

svg.append("defs").append("marker")
        .attr("id", "arrow")
        .attr("markerWidth", 10)
        .attr("markerHeight", 10)
        .attr("orient", "auto")
        .attr("fill", "red")
        .attr("refX", 0.1)
        .attr("refY", 5)
    .append("path")
        .attr("d", "M0,0 L10,5 L0,10");

Path creation: Note- I have tried placing "marker-end" before and after "d", this is just its current state.

path = svg.selectAll("path.link")
  .data(links)
.enter().append("svg:path")
  .attr("class", function(d) { return "link source-" + d.source.key + " target-" + d.target.key; })
  .attr("marker-end", "url(#arrow)")
  .attr("d", function(d, i) { return line(splines[i]); });

and "line", just so it is clear that the radial line generator is being used.

var line = d3.svg.line.radial()
    .interpolate("bundle")
    .tension(.85)
    .radius(function(d) { return d.y; })
    .angle(function(d) { return d.x / 180 * Math.PI; });