2017-07-31 6 views
1

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

Répondre