怎么给svg的marker元素绑定hover事件？？

Question

我用svg绘制了一个带箭头的直线，现在需要能够拖动箭头来改变直线的长短或者方向，但是我没办法hover到箭头元素
如下图：

绘制箭头标识的代码如下：
//先定义箭头的标识：

            var svg2 = d3.select("body").append("svg").attr("class","marker_svg")
                    .attr("width", 300)
                    .attr("height", 100);
            var defs = svg2.append("defs");
            var arrowMarker = defs.append("marker")
                    .attr("id","arrow")//    标识的id号
                    .attr("markerUnits","strokeWidth")
                    .attr("markerWidth","12")
                    .attr("markerHeight","12")
                    .attr("viewBox","0 0 12 12")//坐标系区域
                    .attr("refX","6")//在 viewBox 内的基准点，绘制时此点在直线端点上（要注意大小写）
                    .attr("refY","6")
                    .attr("orient","auto");//    绘制方向，可设定为：auto（自动确认方向）和 角度值
            var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";
            arrowMarker.append("path")
                    .attr("d",arrow_path)
                    .attr("fill","#aaa")
                    .on("mouseover",function (d,i) {
                        console.log("箭头")
                    })

请教哪位大神知道要怎么解决这个问题？？？