d3.js 添加箭头强制有向图从源到目标

我正尝试在强制定向报告中添加从源到目标的箭头，其示例可在此处获得：http://plnkr.co/edit/Q69DkEH5Z9aOe92UwlOB?p=preview
我试图添加箭头在链接从源到目标在上面的图在中间的链接。就像这样：
节点1-----〉-----节点2-------〈------节点3
但我不确定我怎么能做到这一点。
我在这里看到了一个例子：https://stackoverflow.com/a/28050566/8052709并尝试在我的plunkr中添加以下内容：

// build the arrow.
vis.append("svg:defs").selectAll("marker")
    .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

但它失败了。我不太精通使用JS绘制图表，所以不确定我做错了什么。
谁能帮帮我。

下面是一个小demo：

<!DOCTYPE html>
<meta charset="utf-8">
<style>.links polyline { stroke: #999; }</style>
<svg width="400" height="200"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var graph = {
    "nodes": [
        {"id": "A", "group": 1},
        {"id": "B", "group": 2},
        {"id": "C", "group": 2},
        {"id": "D", "group": 3},
        {"id": "E", "group": 3}
    ],
    "links": [
        {"source": "A", "target": "B", "value": 1},
        {"source": "A", "target": "C", "value": 1},
        {"source": "B", "target": "C", "value": 1},
        {"source": "A", "target": "D", "value": 1},
        {"source": "D", "target": "E", "value": 1},
        {"source": "C", "target": "E", "value": 1}
    ]
};

var svg = d3.select("svg");

svg.append("svg:defs").selectAll("marker")
    .data(["arrow"])
    .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 2.5)
    .attr("refY", 0)
    .attr("markerWidth", 5)
    .attr("markerHeight", 5)
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(svg.attr("width") / 2, svg.attr("height") / 2));

var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("polyline")
    .attr("stroke-width", function(d) { return Math.sqrt(d.value); })
    .attr("marker-mid", "url(#arrow)");

var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("r", 5)
    .attr("fill", function(d) { return color(d.group); })
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

node.append("title")
    .text(function(d) { return d.id; });

simulation
    .nodes(graph.nodes)
    .on("tick", ticked);

simulation.force("link")
    .links(graph.links);

function ticked() {
    link.attr("points", function(d) {
        return d.source.x + "," + d.source.y + " " + 
            (d.source.x + d.target.x) / 2 + "," + (d.source.y + d.target.y) / 2 + " " +
            d.target.x + "," + d.target.y;
    });

    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
}

function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.5).restart();
    d.fx = d.x;
    d.fy = d.y;
}

function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
}

function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
}
</script>

制作人：https://stackoverflow.com/a/15758791/18667225

d3.js 添加箭头强制有向图从源到目标

1条答案

相关问题

热门标签

最新问答