2

力有向グラフの例があります。そして、矢印を表示したいのですが、何を試しても表示されません。

ここに私の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 + ")";
        });
    }

そして、ここに私のjsfiddleがあります

4

1 に答える 1

5

上のMDN ドキュメントからmarker-mid:

マーカーミッドは、指定された要素または基本形状の最初と最後の頂点以外のすべての頂点で描画される矢印またはポリマーカーを定義します。

したがって、マーカーはすべての頂点に挿入されますが、開始と終了です。

ただし、単純な線分には、始点と終点以外に頂点はありません。したがって、コードにはマーカーが表示されません。

marker-midたとえば、に変更するとmarker-end、矢印の頭が表示されます (ただし、現在はそれほどきれいではありません): fiddle .

別の方法として、line-elements をpathelements に変更し、中間に頂点を追加することもできます。ただし、これにはさらに十分なコードが必要です。

于 2013-02-04T16:42:35.553 に答える