JSFiddle - React, Tailwind, and code Playground

by Rushan Sakhibgareev

JavaScript

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

    //arrow
svg.append("svg:defs").append("svg:marker")
    .attr("id", "triangle")
    .attr("refX", 12)
    .attr("refY", 6)
    .attr("markerWidth", 30)
    .attr("markerHeight", 30)
    .attr("markerUnits","userSpaceOnUse")
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M 0 0 12 6 0 12 9 6")
    .style("fill", "black");
    
    // path

    
    //line              
        svg.append("line")
            .attr("x1",  100)
            .attr("y1", 100)
            .attr("x2", 200)
            .attr("y2", 100)

            .attr("stroke-width", 1)
            .attr("stroke", "black")
            .attr("marker-end", "url(#triangle)");