d3.js在力指向图中在线上增加一个三角形

Question

我使用的是有力的图形ID d3.js，我只是为了好玩。目前看起来像这样：http://jsfiddle.net/dzorz/WNSTf/

我想在这两条黑线上增加一些三角形，所以它们看起来像箭头。我试图与路径添加三角形，但我不知道如何将其追加到线..

脚本：

var data = {"nodes":[ 
     {"name":"Action 4", "type":5, "slug": "", "value":265000}, 
     {"name":"Action 5", "type":6, "slug": "", "value":23000}, 
     {"name":"Action 3", "type":4, "slug": "", "value":115000}, 
     {"name":"Iron Man", "type":1, "slug": "Iron_Man", 
      "img_href": "http://www.1sticondesign.com/core/free/Ironman-128.png"}, 
     {"name":"Superman", "type":1, "slug": "Superman", 
      "img_href":"http://www.desktop-icon.com/stock-icons/desktop-boss/superman-icon.gif"}, 
     {"name":"Action 1", "type":2, "slug": "",}, 
     {"name":"Action 2", "type":3, "slug": "",}, 
     {"name":"Batman", "type":1, "slug": "Batman", "img_href": "http://icons.iconarchive.com/icons/iconshock/batman/256/Batman-icon.png"} 
        ], 
      "links":[ 
     {"source":0,"target":3,"value":10}, 
     {"source":4,"target":3,"value":1}, 
     {"source":1,"target":7,"value":10}, 
     {"source":2,"target":4,"value":10}, 
     {"source":4,"target":7,"value":1}, 
     {"source":4,"target":5,"value":10}, 
     {"source":4,"target":6,"value":10} 
        ] 
    }  

var w = 560, 
    h = 500, 
radius = d3.scale.log() 
    .domain([0, 312000]) 
    .range(["10", "50"]); 

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

//d3.json(data, function(json) { 
    var force = self.force = d3.layout.force() 
     .nodes(data.nodes) 
     .links(data.links) 
     .distance(100) 
     .charge(-1000) 
     .size([w, h]) 
     .start(); 

    var link = vis.selectAll("line.link") 
     .data(data.links) 
     .enter().append("svg:line") 
     .attr("class", function (d) { return "link" + d.value +""; }) 
     .attr("x1", function(d) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { return d.target.x; }) 
     .attr("y2", function(d) { return d.target.y; }); 


    function openLink() { 
    return function(d) { 
     var url = ""; 
     if(d.type == 1) { 
      url = "wiki/" + d.slug 
     } //else if(d.type == 2) { 
      //url = "clients/" + d.slug 
     //} else if(d.type == 3) { 
      //url = "agencies/" + d.slug 
     //} 
     window.open("https://en.wikipedia.org/"+url) 
    } 
} 


    var node = vis.selectAll("g.node") 
     .data(data.nodes) 
     .enter().append("svg:g") 
     .attr("class", "node") 
     .call(force.drag); 

    node.append("circle") 
     .attr("class", function(d){ return "node type"+d.type}) 
     .attr("r", function(d) { return radius(d.value) || 10 }) 
     //.style("fill", function(d) { return fill(d.type); }) 
     .call(force.drag); 

    node.append("svg:image") 
     .attr("class", "circle") 
     .attr("xlink:href", function(d){ return d.img_href}) 
     .attr("x", "-16px") 
     .attr("y", "-16px") 
     .attr("width", "32px") 
     .attr("height", "32px") 
     .on("click", openLink()); 

    node.append("svg:text") 
     .attr("class", "nodetext") 
     .attr("dx", 16) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.name }); 

    force.on("tick", function() { 
     link.attr("x1", function(d) { return d.source.x; }) 
      .attr("y1", function(d) { return d.source.y; }) 
      .attr("x2", function(d) { return d.target.x; }) 
      .attr("y2", function(d) { return d.target.y; }); 

     node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
    }); 
//}); 

CSS：

.link10 { stroke: #ccc; stroke-width: 3px; stroke-dasharray: 3, 3; } 
.link1 { stroke: #000; stroke-width: 3px;} 
.nodetext { pointer-events: none; font: 10px sans-serif; } 

.node.type1 { 
    fill:brown; 
} 
.node.type2 { 
    fill:#337147; 
} 
.node.type3 { 
    fill:blue; 
} 
.node.type4 { 
    fill:red; 
} 

.node.type5 { 
    fill:#1BC9E0; 
} 

.node.type6 { 
    fill:#E01B98; 
} 

image.circle { 
    cursor:pointer; 
} 

你能不能表演我在我的jsfiddle？

Answer 1

如果拆分数据输入块定义一个变量

var links = svg.selectAll('line.link') 
    .data(data.link) 
    .enter() 

您可以将多个不同的事情你必须定义为links选择。您并不是将更多元素添加到线条本身，而是将元素添加到要添加线条的选区，对应于以一比一的比例向线条添加形状。

我修改了your fiddle在每行的中间添加了一个圆。

如果您只想将元素添加到黑色线条中，则可以使用过滤器通过创建新数据集并对其进行操作来完成此操作。