javascript - d3js 箭头不显示

Question

我有一个力定向图的例子。我想显示箭头，但无论我如何尝试，我都看不到它们。

这是我的javascript

    var nodes = {};

    // Compute the distinct nodes from the links.
    links.forEach(function(link) {
        link.source = nodes[link.source] || (nodes[link.source] = {
            name: link.source
        });
        link.target = nodes[link.target] || (nodes[link.target] = {
            name: link.target
        });
    });

    var width = 960,
        height = 500;

    var force = d3.layout.force()
        .nodes(d3.values(nodes))
        .links(links)
        .size([width, height])
        .linkDistance(100)
        .charge(-300)
        .on("tick", tick)
        .start();

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

    svg.append("svg:defs").selectAll("marker")
        .data(["arrow"])
        .enter().append("svg:marker")
        .attr("id", "arrow")
        .attr("viewBox","0 0 10 10")
        .attr("refX","20")
        .attr("refY","5")
        .attr("markerUnits","strokeWidth")
        .attr("markerWidth","9")
        .attr("markerHeight","5")
        .attr("orient","auto")
        .append("svg:path")
        .attr("d","M 0 0 L 10 5 L 0 10 z")
        .attr("fill", "#f0f0f0");

    var link = svg.append("svg:g").selectAll("line")
        .data(force.links())
        .enter().append("svg:line")
        .attr("class", "link")
        .attr("marker-mid", "url(#arrow)");

    var node = svg.append("svg:g").selectAll(".node")
        .data(force.nodes())
        .enter().append("g")
        .attr("class", "node")
        .call(force.drag);

    node.append("circle")
        .attr("r", 8);

    node.append("text")
        .attr("x", -22)
        .text(function(d) {
        return d.name;
    });

    function tick() {
        link.attr("x1", function(d) {
            return d.source.x;
        })
            .attr("y1", function(d) {
            return d.source.y;
        })
            .attr("x2", function(d) {
            return d.target.x;
        })
            .attr("y2", function(d) {
            return d.target.y;
        });
        link.attr("marker-mid", "url(#arrow)");

        node.attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
        });
    }

和here is my jsfiddle

Answer 1

来自MDN docu on marker-mid :

The marker-mid defines the arrowhead or polymarker that shall be drawn at every vertex other than the first and last vertex of the given element or basic shape.

所以标记将被插入到每个顶点，但开始和结束。

然而，一条简单的线段没有其他顶点，只有起点和终点。因此，您的代码中没有显示任何标记。

如果您将 marker-mid 更改为例如 marker-end，您将看到箭头(尽管现在它们不是那么漂亮): fiddle .

另一种方法是将 line 元素更改为 path 元素，并在中间添加一个额外的顶点。然而，这将需要一些更充分的代码。