如何在D3.js力导向图的边中添加渐变色？

问题分析 #

当前你通过CSS为所有边设置了单色，但SVG的<line>元素要实现随边方向变化的渐变色，需要结合SVG线性渐变并在力导向图的tick事件中动态更新渐变的位置。

解决方案步骤 #

1. 调整CSS样式 #

移除.link的固定stroke颜色，留给渐变使用：

.node{
    stroke: black;
    stroke-width: 2px;
}

.link{
    stroke-width: 2px;
}

2. 添加SVG渐变定义容器 #

在创建SVG后，添加<defs>标签用于存放渐变规则，同时为每条边创建唯一的线性渐变：

// 创建渐变定义容器
var defs = svg.append("defs");

// 为每条边生成唯一线性渐变
var gradients = defs.selectAll("linearGradient")
    .data(links)
    .enter()
    .append("linearGradient")
    .attr("id", function(d, i) { return "link-gradient-" + i; }) // 唯一ID用于引用
    .attr("gradientUnits", "userSpaceOnUse") // 使用节点所在的用户坐标系
    .attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

// 定义渐变起始色（可绑定源节点颜色）
gradients.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "blue");

// 定义渐变结束色（可绑定目标节点颜色）
gradients.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", "red");

3. 绑定渐变到边元素 #

创建边元素时，将stroke属性设置为对应渐变的引用：

var link = svg.selectAll('.link')
    .data(links)
    .enter().append('line')
    .attr('class', 'link')
    .attr("stroke", function(d, i) { return "url(#link-gradient-" + i + ")"; });

4. 动态更新渐变位置 #

在tick函数中，同步更新渐变的起止坐标，确保渐变方向始终匹配边的方向：

function tick(e){
    node
        .attr('cx', function(d){ return d.x; })
        .attr('cy', function(d){ return d.y; })
        .call(force.drag);
    
    link
        .attr('x1', function(d){ return d.source.x; })
        .attr('y1', function(d){ return d.source.y; })
        .attr('x2', function(d){ return d.target.x; })
        .attr('y2', function(d){ return d.target.y; });

    // 更新渐变的起止点，跟随节点移动
    gradients
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });
}

进阶优化：绑定节点颜色到渐变 #

如果想要边的渐变颜色和节点颜色匹配，可以给每个节点添加颜色属性，再绑定到渐变：

// 为节点添加颜色属性（示例用随机颜色）
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

// 初始化节点时绑定颜色
links.forEach(function(link){
    link.source = nodes[link.source] ||
        (nodes[link.source] = {name: link.source, color: getRandomColor()});

    link.target = nodes[link.target] ||
        (nodes[link.target] = {name: link.target, color: getRandomColor()});
});

// 节点填充色使用自身颜色
var node = svg.selectAll('.node')
    .data(force.nodes())
    .enter().append('circle')
    .attr('class', 'node')
    .attr('r', width*0.003)
    .attr("fill", function(d) { return d.color; });

// 渐变颜色绑定节点颜色
gradients.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", function(d) { return d.source.color; });

gradients.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", function(d) { return d.target.color; });

完整修改后代码 #

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    .node{
        stroke: black;
        stroke-width: 2px;
    }

    .link{
        stroke-width: 2px;
    }
</style>
<body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script>
        var width = 640,
            height = 480;

        var links = [
            {source: 'Rohit', target: 'Deep'},
            {source: 'Deep', target: 'Deepa'},
            {source: 'Deepa', target: 'Rohit'},
        ];
        var nodes = {};

        // 随机颜色生成函数
        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        // 初始化节点并绑定颜色
        links.forEach(function(link){
            link.source = nodes[link.source] ||
                (nodes[link.source] = {name: link.source, color: getRandomColor()});

            link.target = nodes[link.target] ||
                (nodes[link.target] = {name: link.target, color: getRandomColor()});
        });

        // 创建SVG容器
        var svg = d3.select('body').append('svg')
            .attr('width', width)
            .attr('height', height);

        // 创建渐变定义容器
        var defs = svg.append("defs");

        // 为每条边生成唯一线性渐变
        var gradients = defs.selectAll("linearGradient")
            .data(links)
            .enter()
            .append("linearGradient")
            .attr("id", function(d, i) { return "link-gradient-" + i; })
            .attr("gradientUnits", "userSpaceOnUse")
            .attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

        // 渐变起始色绑定源节点颜色
        gradients.append("stop")
            .attr("offset", "0%")
            .attr("stop-color", function(d) { return d.source.color; });

        // 渐变结束色绑定目标节点颜色
        gradients.append("stop")
            .attr("offset", "100%")
            .attr("stop-color", function(d) { return d.target.color; });

        // 初始化力导向图布局
        var force = d3.layout.force()
            .size([width, height])
            .nodes(d3.values(nodes))
            .links(links)
            .on("tick", tick)
            .linkDistance(300)
            .start();

        // 创建边元素并绑定渐变
        var link = svg.selectAll('.link')
            .data(links)
            .enter().append('line')
            .attr('class', 'link')
            .attr("stroke", function(d, i) { return "url(#link-gradient-" + i + ")"; });

        // 创建节点元素并绑定颜色
        var node = svg.selectAll('.node')
            .data(force.nodes())
            .enter().append('circle')
            .attr('class', 'node')
            .attr('r', width*0.003)
            .attr("fill", function(d) { return d.color; });

        // 力导向图tick事件处理函数
        function tick(e){
            node
                .attr('cx', function(d){ return d.x; })
                .attr('cy', function(d){ return d.y; })
                .call(force.drag);
            
            link
                .attr('x1', function(d){ return d.source.x; })
                .attr('y1', function(d){ return d.source.y; })
                .attr('x2', function(d){ return d.target.x; })
                .attr('y2', function(d){ return d.target.y; });

            // 更新渐变位置以匹配边的方向
            gradients
                .attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });
        }
    </script>
</body>

内容的提问来源于stack exchange，提问作者Rohit Chakraborty