如何在d3.js的强制布局中动态追加箭头标记,如下图所示
d3.select('svg.svgparentTag').selectAll("marker").data(["BLACK", "BLUE"]).enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr("class", function(d) { return "marker_only " + d.type; })
.attr("d", "M0,-5L10,0L0,5"); //marker
var path = d3.select('.pitch').selectAll("path")
.data(force.links())
.enter().append('g').classed('g_path', true).append("svg:path").attr("class", "link");
path.filter(function(d) {
return d.arrow == true;
}).attr("marker-mid", function(d) { return "url(#BLUE)"}).attr("stroke-linecap", "round");
答案 0 :(得分:3)
http://bl.ocks.org/mbostock/1153292
就是一个例子您需要做的是创建svg:defs
并在svg:marker
中放置defs
个元素。然后使用其中一个属性marker-end
,marker-mid
或marker-start
// Per-type markers, as they don't inherit styles.
svg.append("defs").append("marker")
.attr("id", "marker")
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5");
var path = svg.append("g").selectAll("path")
.data(force.links())
.enter().append("path")
.attr("marker-end", "url(#marker)"; });
如果你需要一个标记中间的直线,如果路径中间没有一个节点,你可能会遇到标记不在中间绘图的问题。看看talkol的答案,了解如何解决这个https://stackoverflow.com/a/15758791/1617269
根据该问题中接受的答案进行调整,您可以使用这样的生成器函数生成具有中间节点或基于d.type
的弧的行。在jsfiddle
function tick() {
path.attr("d", function(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy)/4,
mLx = d.source.x + dx/2,
mLy = d.source.y + dy/2,
mAx = d.source.x + dx,
mAy = d.source.y + dy;
if (d.type === "line") {
return [
"M",d.source.x,d.source.y,
"L",mLx,mLy,
"L",d.target.x,d.target.y,
"Z"
].join(" ");
}
return [
"M",d.source.x,d.source.y,
"A",dr,dr,0,0,1,mAx,mAy,
"A",dr,dr,0,0,1,d.target.x,d.target.y
].join(" ");
});