d3 lines for annotations

by jarandaf

JavaScript

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

var defs = svg.append('defs');

// Left to right marker
defs.append('marker')
    .style('overflow', 'visible')
    .attr('id', 'leftToRight')
    .attr('refX', 0)
    .attr('refY', 0)
    .attr('orient', 'auto')
    .append('path')
        .attr('d', 'M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z ')
        .attr('transform', 'scale(0.6) rotate(180) translate(0,0)')
        .style('fill-rule', 'evenodd')
        .style('stroke-width', 0.625)
        .style('stroke-linejoin', 'round')
        .style('stroke', 'black')
        .style('stroke-opacity', 1)
        .style('fill', 'black')
        .style('fill-opacity', 1);

// Right to left marker
defs.append('marker')
    .style('overflow', 'visible')
    .attr('id', 'rightToLeft')
    .attr('refX', 0)
    .attr('refY', 0)
    .attr('orient', 'auto')
    .append('path')
        .attr('d', 'M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z')
        .attr('transform', 'scale(0.4) translate(10,0)')
        .style('fill-rule', 'evenodd')
        .style('stroke', 'black')
        .style('stroke-width', '1pt')
        .style('stroke-opacity', 1)
        .style('fill', 'black')
        .style('fill-opacity', 1);

// Top to bottom marker
defs.append('marker')
    .style('overflow', 'visible')
    .attr('id', 'topToBottom')
    .attr('refX', 0)
    .attr('refY', 0)
    .attr('orient', 'auto')
    .append('path')
        .attr('d', 'M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z')
        .attr('transform', 'scale(0.6) rotate(180) translate(0,0)')
        .style('fill-rule', 'evenodd')
        .style('stroke', 'black')
        .style('stroke-width', 0.625)
        .style('stroke-linejoin', 'round')
        .style('stroke-opacity', 1)
       ...