draw empty arrow head and round bottom in d3 - svg

Question

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

Answer 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");