score:15

Interesting question. This works by setting the link path normally, then recalculating the end position by backing off the length by the radius of the circle.

First in the marker def, set the `refX` and `refY` to 0 (this is the current way it stays outside the circle):

``````  .attr("refX", 0)
.attr("refY", 0)
``````

Then do:

``````function tick() {

// fit path like you've been doing
path.attr("d", function(d){
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
});

// recalculate and back off the distance
path.attr("d", function(d) {

// length of current path
var pl = this.getTotalLength(),
r = (d.target.weight) * 4 + 16.97, //16.97 is the "size" of the marker Math.sqrt(12**2 + 12 **2)
// position close to where path intercepts circle
m = this.getPointAtLength(pl - r);

var dx = m.x - d.source.x,
dy = m.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);

return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + m.x + "," + m.y;
});

circle.attr("transform", transform);
text.attr("transform", transform);
}
``````

Running code:

``````<!DOCTYPE html>
<html>

<script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<style>
fill: none;
stroke: #666;
stroke-width: 1.5px;
}

circle {
fill: #ccc;
stroke: #fff;
stroke-width: 1.5px;
}

text {
fill: #000;
font: 10px sans-serif;
pointer-events: none;
}
</style>

<body>
<script>
"source": "Harry",
"target": "Sally",
"value": "1.2"
}, {
"source": "Harry",
"target": "Mario",
"value": "1.3"
}, {
"source": "Sarah",
"target": "Alice",
"value": "0.2"
}, {
"source": "Eveie",
"target": "Alice",
"value": "0.5"
}, {
"source": "Peter",
"target": "Alice",
"value": "1.6"
}, {
"source": "Mario",
"target": "Alice",
"value": "0.4"
}, {
"source": "James",
"target": "Alice",
"value": "0.6"
}, {
"source": "Harry",
"target": "Carol",
"value": "0.7"
}, {
"source": "Harry",
"target": "Nicky",
"value": "0.8"
}, {
"source": "Bobby",
"target": "Frank",
"value": "0.8"
}, {
"source": "Alice",
"target": "Mario",
"value": "0.7"
}, {
"source": "Harry",
"target": "Alice",
"value": "0.5"
}, {
"source": "Sarah",
"target": "Alice",
"value": "1.9"
}, {
"source": "Roger",
"target": "Alice",
"value": "1.1"
}];

var nodes = {};

// Compute the distinct nodes from the links.
});
});
});

var width = 500,
height = 500;

var force = d3.layout.force()
.nodes(d3.values(nodes))
.size([width, height])
.charge(-120)
.friction(0.9)
.on("tick", tick)
.start();

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
.data(["dominating"])
.enter().append("marker")
.attr("id", function(d) {
return d;
})
.attr("viewBox", "0 -5 10 10")
.attr("refX", 0)
.attr("refY", 0)
.attr("markerWidth", 12)
.attr("markerHeight", 12)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5");

svg.append("defs").selectAll("marker")
.data(["concomidant"])
.enter().append("marker")
.attr("id", function(d) {
return d;
})
.attr("viewBox", "0 -5 10 10")
.attr("refX", 0)
.attr("refY", 0)
.attr("markerWidth", 12)
.attr("markerHeight", 12)
.attr("orient", "auto-start-reverse")
.append("path")
.attr("d", "M0,-5L10,0L0,5");

var path = svg.append("g").selectAll("path")
.enter().append("path")
.attr("class", function(d) {
})
.attr("marker-end", function(d) {
return "url(#" + d.type + ")";
})
.attr("marker-start", function(d) {
if (d.type == "concomidant") {
return "url(#" + d.type + ")";
}
});

var circle = svg.append("g").selectAll("circle")
.data(force.nodes())
.enter().append("circle")
.attr("r", function(d) {
return d.weight * 4;
})
.call(force.drag);

var text = svg.append("g").selectAll("text")
.data(force.nodes())
.enter().append("text")
.attr("x", 8)
.attr("y", ".31em")
.text(function(d) {
return d.name;
});

function tick() {
path.attr("d", function(d){
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
});
path.attr("d", function(d) {
var pl = this.getTotalLength(),
r = (d.target.weight) * 4 + 16.97, //16.97 is the "size" of the marker Math.sqrt(12**2 + 12 **2)
m = this.getPointAtLength(pl - r);

var dx = m.x - d.source.x,
dy = m.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);

return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + m.x + "," + m.y;
});
circle.attr("transform", transform);
text.attr("transform", transform);
}

function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
</script>
</body>

</html>``````