Make patch of line different color in D3

Question

My visualization uses lines between nodes to indicate their relationship. The wider the line, the more connected the two nodes are. In this context I would like to set a small section of the lines to a darker hue to attach more information to the visualization. Whichever node is closest to the "mark" on the line is the dominant node.

Is there some command to change the color for only part of the line? Or would it be easier to create a rectangle with the same width and angle as the line?

I've attached the current visualization, where I've created some ugly little rectangles to illustrate what I'm trying to do. Also, the code is attached (although it sadly is a bit messy).

enter image description here

ahmohamed · Accepted Answer

In fact, you can't apply CSS gradients to SVG elements. You have to use SVG gradients.

To create an SVG gradient along a link in a graph, the general form would be:

defs.append("linearGradient")                
        .attr("id", gradient_id)
        .attr("gradientUnits", "userSpaceOnUse")
        .attr("x1", source.px)
        .attr("y1", source.py)
        .attr("x2", target.px)
        .attr("y2", target.py)    
    .selectAll("stop")                      
        .data([                             
            {offset: "0%", color: "cyan"},   //color 1
            {offset: "50%", color: "cyan"},  //start the gradient from haf distance
            {offset: "100%", color: "darkBlue"} //to a darker color
        ])                  
    .enter().append("stop")         
        .attr("offset", function(d) { return d.offset; })   
        .attr("stop-color", function(d) { return d.color; });

In your case, the positions of source and target are changing with each force.tick(). So, you need to calculate and apply gradients for all links in each tick. By adding this line to the tick function:

callLink.each(function(d){applyGradient(this, d)});

Next, we need to define applyGradient(line, d) function:

function applyGradient(line, d){
    var self = d3.select(line); //select the current link

    // store the currently used gradient to delete it later.
    var current_gradient = self.style("stroke")
    current_gradient = current_gradient.substring(4, current_gradient.length-1);

    // Generate a random id for the gradient calculated for this link
    var new_gradient_id = "line-gradient" + getRandomInt();

    // Determine the direction of the gradient. In your example, you need
    // the darker hue to be near the bigger node.
    var from = d.source.size < d.target.size? d.source: d.target;
    var to = d.source.size < d.target.size? d.target: d.source;


    // Add the gradient to the svg:defs
    defs.append("linearGradient")                
        .attr("id", new_gradient_id)
        .attr("gradientUnits", "userSpaceOnUse")
        .attr("x1", from.px)
        .attr("y1", from.py)
        .attr("x2", to.px)
        .attr("y2", to.py)    
    .selectAll("stop")                      
        .data([                             
            {offset: "0%", color: "cyan"},       
            {offset: "50%", color: "cyan"},         
            {offset: "100%", color: "darkBlue"}
        ])                  
    .enter().append("stop")         
        .attr("offset", function(d) { return d.offset; })   
        .attr("stop-color", function(d) { return d.color; });   

    //apply the gradient
    self.style("stroke", "url(#" + new_gradient_id + ")")

    //Remove the old gradient from defs.
    defs.select(current_gradient).remove();
}

Here is a working fiddle

Make patch of line different color in D3

Answers (1)

Related Questions