Networks - Edges 2

forked from emeeks's block: Networks - Edges 2

<html>
<head>
  <title>Draw network link arrows using markers</title>
  <meta charset="utf-8" />
<script src="https://d3js.org/d3.v3.min.js" type="text/JavaScript"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }
</style>
<body>

var marker = d3.select("svg").append('defs')
    .append('marker')
    .attr("id", "Triangle")
    .attr("refX", 6)
    .attr("refY", 3)
    .attr("markerUnits", 'userSpaceOnUse')
    .attr("markerWidth", 6)
    .attr("markerHeight", 9)
    .attr("orient", 'auto')
    .append('path')
    .style("fill", "#CC9999")
    .attr("d", 'M 0 0 6 3 0 6 1.5 3');

d3.csv("firm.csv",function(error,data) {createNetwork(data)});

function createNetwork(edgelist) {
  var nodeHash = {};
  var nodes = [];
  var edges = [];

edgelist.forEach(function (edge) {
    if (!nodeHash[edge.source]) {
      nodeHash[edge.source] = {id: edge.source, label: edge.source};
      nodes.push(nodeHash[edge.source]);
    }
    if (!nodeHash[edge.target]) {
      nodeHash[edge.target] = {id: edge.target, label: edge.target};
      nodes.push(nodeHash[edge.target]);
    }
    if (edge.weight >= 5) {
      edges.push({source: nodeHash[edge.source], target: nodeHash[edge.target], weight: edge.weight});
    }
  });
  createForceNetwork(nodes, edges);
}

function createForceNetwork(nodes, edges) {

//create a network from an edgelist

var force = d3.layout.force().nodes(nodes).links(edges)
  .size([500,500])
  .charge(-200)
  .on("tick", updateNetwork);

d3.select("svg").selectAll("line")
  .data(edges)
  .enter()
  .append("line")
  .style("stroke-width", "1px")
  .style("stroke", "#CC9999")
  .attr("marker-end", "url(#Triangle)");

d3.select("svg").selectAll("circle")
  .data(nodes)
  .enter()
  .append("circle")
  .style("fill", "#996666")
  .attr("r", 5)
  .call(force.drag());

force.start();

// to ensure markers stay on lines  
  function updateNetwork() {
    d3.select("svg").selectAll("line")
      .each(function (d) {
            deltaX = d.target.x - d.source.x;
            deltaY = d.target.y - d.source.y;

pythag = Math.sqrt((deltaX * deltaX) + (deltaY * deltaY));

adjustedX =  d.target.x - ((deltaX * 5) / pythag);
            adjustedY = d.target.y - ((deltaY * 5) / pythag);

d3.select(this)
            .attr("x1", d.source.x)
            .attr("y1", d.source.y)
            .attr("x2", adjustedX)
            .attr("y2", adjustedY);

})

d3.select("svg").selectAll("circle")
      .attr("cx", function (d) {return d.x})
      .attr("cy", function (d) {return d.y});
  }

}
</script>
  </footer>

</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js