draw empty arrow head and round bottom in d3

I'm a little new to SVG and d3 in general.

I'm trying to create a line with an "open arrow" on one end and a round circle on its other end.

By "open arrow" I mean a triangle like arrow without a base. Here's an image for clarification:

https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.kindpng.com%2Fimgv%2FJJxmi_triangle-arrow-down-vector-arrow-down-white-png%2F&psig=AOvVaw0YWPto8OMDQIcx3DbPZlCI&ust=1642618347169000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCMDt3q38u_UCFQAAAAAdAAAAABAE

I tried crating it but circle is not on the bottom edge and the arrow is not an open triangle.

This is what I managed to achieve.

let svg = d3.select("#graphContainer")
    .append("svg");

let container = svg.append("svg").append("g");

svg.append("defs")
    .append("svg:marker")
    .attr("id", "arrowEnd")
    .attr("refX", 6)
    .attr("refY", 6)
    .attr("markerWidth", 12)
    .attr("markerHeight", 12)
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M2,2 L10,6 L2,10");

svg.select("defs")
    .append("svg:marker")
    .attr("id", "arrowStart")
    .attr("refX", 0)
    .attr("refY", 0)
    .attr("markerWidth", 12)
    .attr("markerHeight", 12)
    .attr("orient", "auto")
    .append("circle")
    .attr("cx", "5")
    .attr("cy", "2")
    .attr("r", "5")
    .attr("orient", "auto")
    .style("stroke", "blue")
    .style("fill", "none");

container.append("line")
    .attr("x1", 150)
    .attr("y1", 120)
    .attr("x2", 150)
    .attr("y2", 140)
    .attr("stroke", "red")
    .attr("stroke-width", 1)
    .attr("marker-end", "url(#arrowEnd)")
    .attr("marker-start", "url(#arrowStart)");

https://jsfiddle.net/eqawpkvt/ I'm not sure if marker is the right tag

Solution 1:

Eventually I managed to create it. Here's the fiddle: https://jsfiddle.net/0v5gz1ft/

Here are the defs for the arrow start and end

 svg.append("defs")
    .append("svg:marker")
    .attr("id", "arrowEnd")
    .attr("refX", 6)
    .attr("refY", 6)
    .attr("markerWidth", 12)
    .attr("markerHeight", 12)
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M-5,-3 L7,6 L-8,20")
    .style("stroke", "#3278E0")
    .style("fill", "none");

svg.select("defs")
    .append("svg:marker")
    .attr("id", "arrowStart")
    .attr("refX", 6)
    .attr("refY", 9)
    .attr("markerWidth", 22)
    .attr("markerHeight", 22)
    .attr("orient", "auto")
    .append("circle")
    .attr("cx", "4")
    .attr("cy", "9")
    .attr("r", "3")
    .attr("orient", "auto")
    .style("stroke", "#3278E0")
    .style("fill", "none");