Arrows cont. ?

<!DOCTYPE html>
<html>
<head>
    <title>Arrows</title>
    <meta charset="utf-8" />

</head>

var svg = d3.select("body") 
      .append("svg")           
      .attr("width", 600)      
      .attr("height", 600);

d3.csv("myarrows.csv", dottype1, function(error, lines) {

var data = [
    { id: 0, name: 'circle', path: 'M 0, 0  m -5, 0  a 5,5 0 1,0 10,0  a 5,5 0 1,0 -10,0', viewbox: '-6 -6 12 12'}
  , { id: 1, name: 'square', path: 'M 0,0 m -5,-5 L 5,-5 L 5,5 L -5,5 Z', viewbox: '-5 -5 10 10' }
  , { id: 2, name: 'arrow', path: 'M 0,0 m -5,-5 L 5,0 L -5,5 Z', viewbox: '-5 -5 10 10' }
  , { id: 3, name: 'stub', path: 'M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z', viewbox: '-1 -5 2 10' }
  , { id: 4, name: 'none', path: '', viewbox: '' }
    ]

var color = d3.scale.category10();

svg.append("g")
      .selectAll("line")
      .data(lines)
      .enter()
      .append("line")
      .attr("x1", function(d) { return d.x1; })
      .attr("y1", function(d) { return d.y1; })
      .attr("x2", function(d) { return d.x2; })
      .attr("y2", function(d) { return d.y2; })
      .attr("marker-start", function(d) { return 'url(#startmarker_' + d.startname  + ')' })
      .attr("marker-end", function(d) { return 'url(#marker_' + d.name  + ')' })
   //   .style("stroke", "brown")           
      .style("stroke", function(d) {return d.color = color(d.name); })           
   // .attr('stroke', function(d,i) { return color(i)})
      .style("stroke-width", 3)          
      .style("stroke-linecap", "square") 
               ;

svg.append("svg:defs")
      .selectAll("line")
      .data(data)
      .enter()
      .append("svg:marker") 
      .attr('id', function(d){ return 'marker_' + d.name})
      .attr('viewBox', function(d){ return d.viewbox })
      .attr('refX', 0)
      .attr('markerWidth', 4)
      .attr('markerHeight', 4)
   //   .style("stroke", "brown") 
     .style("stroke", function(d) {return d.color = color(d.name); })  
     //  .style("fill", "brown")        
       .style("fill", function(d) {return d.color = color(d.name); })  
       .attr('orient', 'auto')
      .append('svg:path')
      .attr('d', function(d){ return d.path })
                 ;

svg.append("svg:defs")
      .selectAll("line")
      .data(data)
      .enter()
      .append("svg:marker") 
      .attr('id', function(d){ return 'startmarker_' + d.name})
      .attr('viewBox', function(d){ return d.viewbox })
      .attr('refX', 6)
      .attr('markerWidth', 3)
      .attr('markerHeight', 3)
 //   .style("stroke", "brown") 
      .style("stroke-width", 2)          
      .style("stroke", function(d) {return d.color = color(d.name); })  
       .style("fill", "none")          
      .attr('orient', 'auto')
      .append('svg:path')
      .attr('d', function(d){ return d.path })
                 ;
});

function dottype1(d) {
  d.x1 = +d.x1x1;
  d.y1 = +d.y1y1;
  d.x2 = +d.x2x2;
  d.y2 = +d.y2y2;
  d.startname = d.starttype;
  d.name = d.endtype;
   return d;
}

</script>

</body>
</html>

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

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