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

Question

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

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

var gradientColor = d3.scale.linear().domain([0,1]).range(["#08519c","#bdd7e7"]);

然后,就像之前的帖子一样,我有一个添加标记的功能:

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 + ")";    };

然后我的链接定义是基于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 gradientColor(d[3]); } )
  .attr("marker-end", marker( "#FFCC33" ) );

这不符合书面规定; 浏览器给我一个"未捕获的TypeError:无法读取未定义的属性'5'"(其中'd [5]'指的是链接所具有的属性列表中的第五个属性).在这种情况下,问题显然是将数据函数传递给标记函数.如果我输入静态颜色,如"#FFCC33",那么箭头DO会改变颜色(现在).不幸的是,1.5年前发布这种"标记功能"解决方案的人根本没有将颜色传递给标记功能.

我不知道如何正确地提供链接的颜色.理想情况下,我可以使用箭头所附链接颜色的引用,而不是输入相同的颜色函数(因为最终我将通过基于按钮按下的不同方案对链接着色).

我已经创建了一个JS Fiddle,其中包含了查看和解决问题所需的所有内容.目前我将静态颜色传递给标记,但它应该是它所附着的链接的颜色.我还提供了关于正确定位箭头和边缘尾部的另一个问题的功能.

Answer 1

我不相信你能够定义一个SVG标记并改变它的颜色.相反,您需要多次定义标记(每种颜色需要使用1个).有一个很好的例子,最近出现在D3网站上.

这种方式的工作方式是,如果有不同的标记,每个标记都定义了标记的颜色.以下是定义的所有标记的屏幕截图:

然后这个特定的例子循环路径上的CSS类.每个路径使用的特定颜色标记在CSS类中定义,该CSS类在任何给定时间应用于路径.

我修改了你的例子,为marker每条路径添加一个新的(并在渐变中略微改变颜色以证明它正在工作).这是我得到的:

var width = 960,
    height = 500;

var color = d3.scale.category20();
var gradientColor = d3.scale.linear().domain([0, 15]).range(["#ff0000", "#0000ff"]);

var force = d3.layout.force()
    .linkDistance(10)
    .linkStrength(2)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var defs = svg.append("svg:defs");

d3.json("http://bost.ocks.org/mike/miserables/miserables.json", function (error, graph) {
    if (error) throw error;


    function marker(color) {

        defs.append("svg:marker")
            .attr("id", color.replace("#", ""))
            .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(" + color + ")";
    };

    var nodes = graph.nodes.slice(),
        links = [],
        bilinks = [];

    graph.links.forEach(function (link) {
        var s = nodes[link.source],
            t = nodes[link.target],
            i = {}, // intermediate node
            linkValue = link.value // for transfering value from the links to the bilinks
            ;
        nodes.push(i);
        links.push({
            source: s,
            target: i
        }, {
            source: i,
            target: t
        });
        bilinks.push([s, i, t, linkValue]);
    });

    force.nodes(nodes)
        .links(links)
        .start();

    var link = svg.selectAll(".link")
        .data(bilinks).enter().append("path")
        .attr("class", "link")
        .style("fill", "none")
        .style("opacity", "0.5")
        .style("stroke-width", "2")
        .each(function(d) {
            var color = gradientColor(d[3]);
            console.log(d[3]);
            d3.select(this).style("stroke", color)
                           .attr("marker-end", marker(color));
        });

    var node = svg.selectAll(".node")
        .data(graph.nodes)
        .enter().append("g")
        .attr("class", "node")
        .call(force.drag);

    node.append("circle")
        .attr("r", function (d) {
        return 2 + d.group;
    })
        .style("opacity", 0.5)
        .style("fill", function (d) {
        return color(d.group);
    });

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

    force.on("tick", function () {
        link.attr("d", function (d) {
            return "M" + d[0].x + "," + d[0].y + "S" + d[1].x + "," + d[1].y + " " + d[2].x + "," + d[2].y;
        });
        node.attr("transform", function (d) {
            return "translate(" + d.x + "," + d.y + ")";
        });
    });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>