我试图做明显的事情,让我的有向图的链接的箭头颜色匹配边缘颜色.令人惊讶的是,我没有找到一个完整的解决方案,虽然这个较旧的帖子似乎是一个很好的起点.我可以根据下面的描述调整该解决方案,或者如果有一种创建箭头的优良方法可以实现这种效果,我将非常感激.
首先,我有一个线性渐变颜色函数,通过属性为我的边缘着色,如下所示:
var gradientColor = d3.scale.linear().domain([0,1]).range(["#08519c","#bdd7e7"]);
Run Code Online (Sandbox Code Playgroud)
然后,就像之前的帖子一样,我有一个添加标记的功能:
function marker (color) {
var reference;
svg.append("svg:defs").selectAll("marker")
.data([reference])
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15) // This sets how far back it sits, kinda
.attr("refY", 0)
.attr("markerWidth", 9)
.attr("markerHeight", 9)
.attr("orient", "auto")
.attr("markerUnits", "userSpaceOnUse")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5")
.style("fill", color);
return "url(#" + reference + ")"; };
Run Code Online (Sandbox Code Playgroud)
然后我的链接定义是基于Curved Links示例的链接定义.
var link = svg.selectAll(".link")
.data(bilinks)
.enter().append("path")
.attr("class", "link")
.style("fill", "none")
.style("opacity", "0.5")
.style("stroke-width", "2")
.style("stroke", function(d) { return …Run Code Online (Sandbox Code Playgroud)