d3 annotation line

CSS

path {
    stroke: black;
    stroke-width: 1.5px;
    fill: none
}

JavaScript

var swoop1 ='<path d="M9.762,2.169 c1.127,22.398,19.615,40.182,42.296,40.182"/>'
swoop1+='<g> <polygon points="2.365,9.506 3.948,10.73 9.973,2.925 17.32,9.505 18.654,8.013 9.706,0"/></g>'

var swoop2 ='<path stroke-miterlimit="10" d="M7.261,2.837 C22.926,21.3,21.457,48.958,3.557,65.643"/>'
        swoop2+='<g> <polygon points="4.792,13.184 6.787,13.356 7.625,3.531 17.365,5.086 17.679,3.109 5.817,1.217"/> </g>'

var svg = d3.select('body').append('svg')
    .attr('width', 500)
    .attr('height', 500);

svg.append('g').html(swoop1);
//svg.append('g').html(swoop2);