Je travaille à partir de l'exemple du graphique de force dirigée.NVD3 - Comment ajouter des têtes de flèches aux liens en utilisant angular-nvd3
krispo/angulaire nvd3/blob/gh-pages/js/forceDirectedGraph.js
Comment puis-je modifier ce code, afin que je puisse ajouter des têtes de flèches pour chacun des liens pour indiquer la direction?
$scope.options = {
chart: {
type: 'forceDirectedGraph',
height: 450,
width: (function(){ return nv.utils.windowSize().width })(),
margin:{top: 20, right: 20, bottom: 20, left: 20},
color: function(d){
return color(d.group)
},
nodeExtras: function(node) {
node && node
.append("text")
.attr("dx", 8)
.attr("dy", ".35em")
.text(function(d) { return d.name })
.style('font-size', '10px');
}
}
};
Alors que la sortie ressemble à quelque chose plus comme ceci:
http://bl.ocks.org/tomgp/d59de83f771ca2b6f1d4
qui append marqueurs comme la pointe de flèche au FDG.
defs.append("marker")
.attr({
"id":"arrow",
"viewBox":"0 -5 10 10",
"refX":5,
"refY":0,
"markerWidth":4,
"markerHeight":4,
"orient":"auto"
})
.append("path")
.attr("d", "M0,-5L10,0L0,5")
.attr("class","arrowHead");
Voici mon exemple de plunker
http://plnkr.co/edit/rEOMRRnHx1UUj4Lu5Jui?p=preview