As a beginner I am having problem in including the gradient color in edges of a force directed graph.

[Rohit-Chakraborty]

Here I have added the color to all the nodes and links through style tag

<style>
.node{
fill: blue;
stroke: black;
stroke-width: 2px;
}

.link{
    stroke: #777;
    stroke-width: 2px;
}

</style>``

This results in coloring of all edges in black... And I want to add the gradient color to the edges.. Similar to this image

<style> .node{ fill: blue; stroke: black; stroke-width: 2px; } .link{ stroke: #777; stroke-width: 2px; } </style> <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 = {};

    //adding to nodes
    links.forEach(function(link){
        link.source = nodes[link.source] ||
            (nodes[link.source] = {name: link.source});

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

    //adding svg to body

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

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

    var node = svg.selectAll('.node')
        .data(force.nodes())
        .enter().append('circle')
        .attr('class', 'node')
        .attr('r', width*0.003);

    //define the tick func.
    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;
            })

    }


</script>

``

Here is the full script

[git-ashish]

You need to use path instead of line for drawing the links and use linearGradient for fill. Search along these lines and that should throw up some pointers. Best.