相关疑难解决方法(0)

在D3中将箭头颜色与线条颜色匹配

我试图做明显的事情,让我的有向图的链接的箭头颜色匹配边缘颜色.令人惊讶的是,我没有找到一个完整的解决方案,虽然这个较旧的帖子似乎是一个很好的起点.我可以根据下面的描述调整该解决方案,或者如果有一种创建箭头的优良方法可以实现这种效果,我将非常感激.

首先,我有一个线性渐变颜色函数,通过属性为我的边缘着色,如下所示:

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)

javascript svg d3.js

4
推荐指数
1
解决办法
2760
查看次数

标签 统计

d3.js ×1

javascript ×1

svg ×1