为什么marker-mid不在d3.js V4中的line元素上工作

Question

我想在一条边的中间显示一个箭头来显示它的方向。目前它可以在marker-start和marker-end上工作。但是无法在标记中间工作。我已经检查过document了，它表明它应该可以正常工作。有人可以帮忙吗？非常感谢！

这是我的优势代码：

    SVG = d3.select("svg"),
        width = +SVG.attr("width"),
        height = +SVG.attr("height"),
        transform = d3.zoomIdentity;

    g = SVG.append("g");//a group for zoom in 
    const edge = g.selectAll(".g")//put the edge in a group
        .data(edges)
        .enter().append("g");

    edge.append("line")
        .attr("marker-mid","url(#c)")
        .attr("class", "link")
        .attr("x1", function(l) {
            var sourceNode = nodes.filter(function(d) {
                return d.id == l.outnode
            })[0];
            d3.select(this).attr("y1", sourceNode.y);
            return sourceNode.x
        })
        .attr("x2", function(l) {
            var targetNode = nodes.filter(function(d) {
                return d.id == l.innode
            })[0];
            d3.select(this).attr("y2", targetNode.y);
            return targetNode.x
        })
        .attr("fill", "none")
        .attr("stroke", "black");

    edge.append("text")
        .attr("class","linetext")
        .text(function (d) {
            return d.description;
        })
        .attr("x", function(l) {
            var sourceNode = nodes.filter(function(d) {
                return d.id == l.outnode
            })[0];
            var targetNode = nodes.filter(function(d) {
                return d.id == l.innode
            })[0];
            d3.select(this).attr("y", (sourceNode.y+ targetNode.y)/2);
            return (sourceNode.x + targetNode.x)/2
        })
        .on("dblclick", editEdgeText);

代表风格：

<svg id="myP" width="90%" height="500">
  <defs>
    <marker id="c" refX="12" refY="6" markerWidth="12" markerHeight="12" orient="auto" stroke="blue" stroke-width="2" fill="red">
      <circle cx="6" cy="6" r="5" />
    </marker>
  </defs>
</svg>