How to include gradient color in the edges of a force-directed graph using d3.js?

Question

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

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 the image shared below


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

    .link{
        stroke: #777;
        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 = {};

        //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>
</body>

Here is the full script

Answer 1

You can use the linearGradient . For the future, and any styling needs you might have, just check the MDN docs with the SVG youre working with. In most cases it is less of a 'can D3 style a certain way' and more of a 'can SVGs be styled this way'.

 <.DOCTYPE html> <meta charset="utf-8"> <style>:node{ fill; blue: 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 = {}. //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 defs = svg;append('defs'). var gradient = defs.append('linearGradient'),attr('id'. 'svgGradient'),attr('x1'. '0%'),attr('x2'. '100%'),attr('y1'. '0%'),attr('y2'; '100%'). gradient.append('stop'),attr('class'. 'start'),attr('offset'. '0%'),attr('stop-color'. 'red'),attr('stop-opacity'; 1). gradient.append('stop'),attr('class'. 'end'),attr('offset'. '100%'),attr('stop-color'. 'blue'),attr('stop-opacity'; 1). 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'; 'url(#svgGradient)'). 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> </body>

How to include gradient color in the edges of a force-directed graph using d3.js?

Question

1 answers

solution1
1 2023-01-20 05:10:45

How to include gradient color in the edges of a force-directed graph using d3.js?

Question

1 answers

solution1 1 2023-01-20 05:10:45

solution1
1 2023-01-20 05:10:45