javascript - 将箭头颜色与 D3 中的线条颜色匹配

Question

我正在尝试做一件显而易见的事情，即让我的有向图链接的箭头颜色与边缘颜色相匹配。令人惊讶的是，尽管this older post，我还没有找到一个完整的解决方案。似乎是一个很好的起点。我会很好地调整该解决方案以按照下面概述的方式工作，或者如果有更好的方法来创建可以达到这种效果的箭头，我将不胜感激。

首先，我有一个线性渐变颜色函数来按如下属性为我的边缘着色:

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 example 的链接定义。 .

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

这并不像写的那样有效；浏览器给我一个“Uncaught TypeError: Cannot read property '5' of undefined”(其中 'd[5]' 指的是链接具有的属性列表中的第五个属性)。在这种情况下，问题显然是将数据函数传递给标记函数。如果我输入像“#FFCC33”这样的静态颜色，那么箭头会改变颜色(现在)。不幸的是，1.5 年前发布这个“标记函数”解决方案的人根本没有包括将颜色传递给标记函数的部分。

我不知道如何正确输入链接的颜色。理想情况下，我将能够使用对箭头所附链接颜色的引用，而不是输入相同的颜色函数(因为最终我将根据按钮按下情况通过不同的方案为链接着色)。

我创建了一个 JS Fiddle其中包括查看和解决问题的所有必要部分。目前我正在将静态颜色传递给标记，但它应该是它所附加的链接的颜色。我还包含了关于正确定位箭头和边缘尾部的另一个问题的功能。

Answer 1

我认为您无法定义单个 SVG 标记并更改其颜色。相反，您需要多次定义标记(每种颜色需要使用 1 个)。有一个不错的example最近出现在 D3 网站上。

它的工作方式是有很多不同的标记，每个标记定义标记的颜色。这是所有已定义标记的屏幕截图:

然后这个特定的例子，在路径上循环 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>