D3 Examples - SVG Arrow heads

xxxxxxxxxx
 
<html>
<head>
    <title>SVG Arrows with D3</title>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="https://www.toffeemilkshake.co.uk/tgp-ui-styles/ui-style.css">
    <style type="text/css">
    .arrow{
        stroke-width:5;
        stroke:#000;
        stroke-dasharray:5, 5;
    }
​
    circle{
        stroke-width:5;
        stroke:#000;
        fill:#FFF;
    }
​
    #turtle-icon, #arrow{
        stroke-width:1;
        stroke-dasharray:0; 
    }
​
    </style>
</head>
<body>
    <h1>Arrow heads and turtles in D3</h1>
    <div class="viz"></div>
​
    <hr>
    <p><a href="https://www.toffeemilkshake.co.uk">Tom Pearson 2014</a></p>
    <p>Turtle Icon by Martin Smith from <a href="https://thenounproject.com/">The Noun Project</a></p>
    
</body>
<script type="text/javascript">
​
    d3.xml('turtle.svg', "image/svg+xml", function(xml){
        var importedNode = document.importNode(xml.documentElement, true).getElementsByTagName("g")[0],
​
        height = 500, width = 800,
        margin = 50,
        type = ['turtle','arrow'];
        svg = d3.select(".viz").append("svg")
            .attr("width", 800)
            .attr("height", 600),
​
        defs = svg.append("defs")
​
        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");
​
        defs.append("marker")
                .attr({
                    "id":"turtle",
                    "viewBox":"0 0 100 100",
                    "refX":50,
                    "refY":50,
                    "markerWidth":10,
                    "markerHeight":10,
                    "orient":"auto"
                })
                .node().appendChild(importedNode);
        
​
​
        d3.range(15).forEach(function(){ //I don't normally do loops like this, just a whim
            svg.append('line')
                .attr({
                    "class":"arrow",
                    "marker-end":"url(#" + type[Math.round(Math.random())] + ")",
                    "x1":width/2,
                    "y1":height/2,
                    "x2":margin + Math.random()*(width-margin*2),
                    "y2":margin + Math.random()*(height-margin*2)
                });
        })
​
        svg.append('circle')
            .attr({
                cx:width/2,cy:height/2,r:20
            })
    })
​
    
</script>
</html>
    