Moving svg markers around a rectangular shape in d3js - svg

Question

I am using d3 for visualizing gene networks using a fixed force-directed layout.
The graph contains rectangular / elliptic / round rectangular shaped nodes with markers at the end of links between those nodes. So far (and as I understand) those markers are positioned by refX and refX and thus follow a radial shape around the end of the path which links two nodes. Is there any way that I can define a "path" or marker in such a manner that the marker moves along the shape of the node instead of around this node with a fixed distance relative to the end of the path?
To illustrate my problem:
var graph = {
"nodes": [{
"name": "from",
"fixed": true,
x: 100,
y: 100,
w: 60,
h: 20
}, {
"name": "to",
"fixed": true,
x: 250,
y: 250,
w: 60,
h: 20
}],
"links": [{
"source": 0,
"target": 1
}]
}
var width = 960,
height = 500;
var force = d3.layout.force()
.charge(-120)
.linkDistance(300)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
force.nodes(graph.nodes)
.links(graph.links)
.start();
var defs = svg.append("svg:defs");
var marker = defs.selectAll("marker");
marker = marker.data([{
"type": "arrow",
"d": "M0,-5L10,0L0,5L2,0",
"view": "0 -5 10 10",
"color": "#000000"
}])
.enter()
.append("svg:marker")
.attr("id", function(d) {
return d.type;
})
.attr("viewBox", function(d) {
return d.view;
})
.attr("refX", 30)
.attr("refY", 0)
.attr("markerWidth", 5)
.attr("markerHeight", 5)
.attr("orient", "auto");
marker.append("svg:path")
.attr("d", function(d) {
return d.d;
})
.style("fill", function(d) {
return d.color;
});
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", "5")
.attr("marker-end", "url(#arrow)");
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("rect")
.attr("class", "node")
.attr("width", function(d) {
return d.w;
})
.attr("height", function(d) {
return d.h;
})
.style("fill", "blue")
.call(force.drag);
node.append("title")
.text(function(d) {
return d.name;
});
force.on("tick", function() {
link.attr("x1", function(d) {
return d.source.x + d.source.w / 2;
})
.attr("y1", function(d) {
return d.source.y + d.source.h / 2;
})
.attr("x2", function(d) {
return d.target.x + d.target.w / 2;
})
.attr("y2", function(d) {
return d.target.y + d.target.h / 2;
})
node.attr("x", function(d) {
return d.x;
})
.attr("y", function(d) {
return d.y;
});
});
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
JsFiddle example:
http://jsfiddle.net/millermaximilian/w3eq6ccc/
I am really thankful for any advice!
Max

Answer 1

There is no built in way. You can create the code to parameterize the location of the marker based on the mathematical definition of the shape. This is, fundamentally, what's going on when you set a marker to draw at X px from a node when that node is a circle, since mathematically it's just the radius. With a more complex shape, it's harder, though of course squares, rectangles and ellipses are still relatively easy to compute. With a complex svg:path shape, you could, I imagine, use some combination of path's built-in getPointAtLength and computing the angle from one node to another to do that, but I don't know of any implementations of any of the earlier examples, much less something like that.