如何在d3.js中添加箭頭鏈接？

我想在鏈接的一端放一個箭頭。我有管理的鏈接，但無法繪製箭頭。這裏是我的代碼工作正常，但我上面提到的問題只是幫助我如何繪製箭頭。謝謝。如何在d3.js中添加箭頭鏈接？

請記住，我想要目標方面的箭頭。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="D3js_demo.WebForm1" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head runat="server"> 
    <script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 
    <title>Weighted Citation Graph</title> 
    <style> 

path.link { 
    fill: #ccc; 
    stroke: #333; 
    stroke-width: 1.5px; 
} 

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

text { 
    font: 10px sans-serif; 
    pointer-events: none; 
} 

text.shadow { 
    stroke: #fff; 
    stroke-width: 3px; 
    stroke-opacity: .8; 
} 

body { 
    background-color: white; 
    margin: 0px; 
} 

.graphContainer { 
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white; 
} 

</style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <script src="//d3js.org/d3.v3.min.js"></script> 
<script> 

    $(function() { 
     var color = d3.scale.category20(); 
     var data = { 
      "nodes": [ 
       { "id": 0, "name": "paper1", "citation": 5, "group": 1 }, 
       { "id": 1, "name": "paper2", "citation": 8, "group": 2 }, 
       { "id": 2, "name": "paper3", "citation": 12, "group": 3 }, 
       { "id": 3, "name": "paper4", "citation": 25, "group": 4 }, 
       { "id": 4, "name": "paper5", "citation": 15, "group": 5 }, 
       { "id": 5, "name": "paper6", "citation": 5, "group": 1 }, 
       { "id": 6, "name": "paper7", "citation": 8, "group": 2 }, 
       { "id": 7, "name": "paper8", "citation": 12, "group": 3 }, 
       { "id": 8, "name": "paper9", "citation": 25, "group": 4 }, 
       { "id": 9, "name": "paper10", "citation": 15, "group": 5 } 
      ], 
      "links": [ 
       { "source": 0, "target": 1, "name": "A-B-1", "value": 0 , "grouo": 1}, 
       { "source": 0, "target": 1, "name": "A-B-2", "value": 24, "grouo": 2 }, 
       { "source": 0, "target": 2, "name": "A-C-1", "value": 100, "grouo": 1 }, 
       { "source": 0, "target": 2, "name": "A-C-3", "value": 44, "grouo": 2 }, 
       { "source": 2, "target": 3, "name": "A-D-1", "value": 169, "grouo": 1 }, 
       { "source": 2, "target": 3, "name": "A-D-2", "value": 80, "grouo": 2 }, 
       { "source": 2, "target": 4, "name": "A-E-1", "value": 16, "grouo": 1 }, 
       { "source": 2, "target": 4, "name": "A-E-5", "value": 200, "grouo": 2 }, 
       { "source": 4, "target": 5, "name": "A-B-1", "value": 8, "grouo": 1 }, 
       { "source": 4, "target": 5, "name": "A-B-2", "value": 24, "grouo": 2 }, 
       { "source": 5, "target": 6, "name": "A-C-1", "value": 12, "grouo": 1 }, 
       { "source": 5, "target": 6, "name": "A-C-3", "value": 44, "grouo": 2 }, 
       { "source": 5, "target": 7, "name": "A-D-1", "value": 125, "grouo": 1 }, 
       { "source": 5, "target": 7, "name": "A-D-2", "value": 225, "grouo": 2 }, 
       { "source": 7, "target": 8, "name": "A-E-1", "value": 36, "grouo": 1 }, 
       { "source": 7, "target": 8, "name": "A-E-5", "value": 81, "grouo": 2 }, 
       { "source": 8, "target": 3, "name": "A-C-1", "value": 9, "grouo": 1 }, 
       { "source": 8, "target": 3, "name": "A-C-3", "value": 16, "grouo": 2 }, 
       { "source": 8, "target": 9, "name": "A-D-1", "value": 50, "grouo": 1 }, 
       { "source": 8, "target": 9, "name": "A-D-2", "value": 100, "grouo": 2 } 
      ] 
     }; 

     // used to store the number of links between two nodes. 
     // mLinkNum[data.links[i].source + "," + data.links[i].target] = data.links[i].linkindex; 
     var mLinkNum = {}; 

     // sort links first 
     sortLinks(); 

     // set up linkIndex and linkNumer, because it may possible multiple links share the same source and target node 
     setLinkIndexAndNum(); 

     var w = 960, 
      h = 500; 

     var force = d3.layout.force() 
         .nodes(d3.values(data.nodes)) 
         .links(data.links) 
         .size([w, h]) 
         .linkDistance(200) 
         .charge(-1000) 
         .on("tick", tick) 
         .start(); 

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

     var path = svg.append("svg:g") 
        .selectAll("line") 
        .data(force.links()) 
        .enter().append("svg:path") 
        .attr("class", "link") 
        .style("stroke-width", function (d) { return Math.sqrt(d.value)}) 
        .style("stroke", function (d) { return color(d.grouo)}); 

     var circle = svg.append("svg:g") 
         .selectAll("circle") 
         .data(force.nodes()) 
         .enter().append("svg:circle") 
         .attr("r", function (d) { return (d.citation); }) 
         .style("fill", function (d) { return color(d.group); }) 
         .call(force.drag); 

     var text = svg.append("svg:g") 
         .selectAll("g") 
         .data(force.nodes()) 
         .enter().append("svg:g"); 

     // A copy of the text with a thick white stroke for legibility. 
     text.append("svg:text") 
      .attr("x", 8) 
      .attr("y", ".31em") 
      .attr("class", "shadow") 
      .text(function (d) { return d.name; }); 

     text.append("svg:text") 
      .attr("x", 8) 
      .attr("y", ".31em") 
      .text(function (d) { return d.name; }); 

     // Use elliptical arc path segments to doubly-encode directionality. 
     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); 
       // get the total link numbers between source and target node 
       var lTotalLinkNum = mLinkNum[d.source.id + "," + d.target.id] || mLinkNum[d.target.id + "," + d.source.id]; 
       if (lTotalLinkNum > 1) { 
        // if there are multiple links between these two nodes, we need generate different dr for each path 
        dr = dr/(1 + (1/lTotalLinkNum) * (d.linkindex - 1)); 
       } 
       // generate svg path 
       return "M" + d.source.x + "," + d.source.y + 
        "A" + dr + "," + dr + " 0 0 1," + d.target.x + "," + d.target.y + 
        "A" + dr + "," + dr + " 0 0 0," + d.source.x + "," + d.source.y; 
      }); 

      // Add tooltip to the connection path 
      path.append("svg:title") 
       .text(function (d, i) { return d.name; }); 

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

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

     // sort the links by source, then target 
     function sortLinks() { 
      data.links.sort(function (a, b) { 
       if (a.source > b.source) { 
        return 1; 
       } 
       else if (a.source < b.source) { 
        return -1; 
       } 
       else { 
        if (a.target > b.target) { 
         return 1; 
        } 
        if (a.target < b.target) { 
         return -1; 
        } 
        else { 
         return 0; 
        } 
       } 
      }); 
     } 

     //any links with duplicate source and target get an incremented 'linknum' 
     function setLinkIndexAndNum() { 
      for (var i = 0; i < data.links.length; i++) { 
       if (i != 0 && 
        data.links[i].source == data.links[i - 1].source && 
        data.links[i].target == data.links[i - 1].target) { 
        data.links[i].linkindex = data.links[i - 1].linkindex + 1; 
       } 
       else { 
        data.links[i].linkindex = 1; 
       } 
       // save the total number of links between two nodes 
       if (mLinkNum[data.links[i].target + "," + data.links[i].source] !== undefined) { 
        mLinkNum[data.links[i].target + "," + data.links[i].source] = data.links[i].linkindex; 
       } 
       else { 
        mLinkNum[data.links[i].source + "," + data.links[i].target] = data.links[i].linkindex; 
       } 
      } 
     } 
    }); 

</script> 

    </div> 
     <div id="graphContainer" class="graphContainer"></div> 
    </form> 
</body> 
</html>

來源

2016-05-01 Umair Munawar Khokhar

我做了一個撥弄基本箭頭例如：https://jsfiddle.net/4xt5v51m/3/

我所定義的箭頭：

svg.append("svg:defs").selectAll("marker") 
    .data(["end"])  // Different link/path types can be defined here 
    .enter().append("svg:marker") // This section adds in the arrows 
    .attr("id", String) 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", 15) 
    .attr("refY", 0.5) 
    .attr("markerWidth", 2) 
    .attr("markerHeight", 2) 
    .attr("orient", "auto") 
    .append("svg:path") 
    .attr("d", "M0,-5L10,0L0,5");

，然後設置你的鏈接屬性此標記：

.attr("marker-end", "url(#end)");

你可以通過玩att來改變顏色，大小，形狀和位置標記的肋骨。

來源

2016-05-01 11:09:11 echonax

感謝兄弟。它真的工作... –

因爲我有每對節點2鏈接，有任何方式顯示任何一個鏈接上的箭頭？ –

@UmairMunawarKhokhar你應該爲此詢問一個新問題。我無法理解你的意思。就像每個鏈接只顯示1個箭頭一樣？ – echonax

如何在d3.js中添加箭頭鏈接？

回答

相關問題