NVD3 - 如何使用 angular-nvd3 向链接添加箭头答案

【问题标题】：NVD3 - How to add arrow heads to the links using angular-nvd3NVD3 - 如何使用 angular-nvd3 向链接添加箭头
【发布时间】：2017-07-31 19:08:31
【问题描述】：

我正在研究力有向图的示例。

krispo/angular-nvd3/blob/gh-pages/js/forceDirectedGraph.js

我将如何修改此代码，以便我可以在每个链接上添加箭头以指示方向？

$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');
        }
    }
};

所以输出看起来更像这样：

http://bl.ocks.org/tomgp/d59de83f771ca2b6f1d4

将标记作为箭头附加到 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");

这是我的 plunker 示例

http://plnkr.co/edit/rEOMRRnHx1UUj4Lu5Jui?p=preview

【问题讨论】：

标签： d3.js nvd3.js angular-nvd3

【解决方案1】：

看起来这是 Angular-nvd3 的问题。希望它会得到解决。 https://github.com/krispo/angular-nvd3/issues/677

【讨论】：