Drawing different colored “strokes” between center and different nodes in a D3.js tree

Question

Here is my code. I am trying to connect/draw a path between center and different nodes. Now I want to make a different colored stroke for a different path. I ha

Answer 1

To style different line segments differently, they have to be separate line elements instead of all part of one path.

However, drawing a line graph as a series of line elements complicates the code. For every point, you not only need to know the data at that point, you also need to the data for the previous or next point (the start or end of the line).

I had written up a (more complicated) example of making a line graph this way for a previous SO question, so I was able to quickly adapt it for you.

Here's the fiddle: http://fiddle.jshell.net/4xZwb/3/

For that example, I used an "each" call to group all the calculations:

var lines = svg.append("g").attr("class", "plot").selectAll("line");
        //define a d3 selection consisting of <line> elements
        //that are grouped within g.plot

    lines = lines.data(data);  
        //tell the selection to make room for every point in the data array

    lines.enter().append("line");
        //add one <line> element for every data point

    lines.each(function(d,i){
        //for each line in the selection, this function will be called
        //with d equal to the data point and i equal to the index
        //and "this" equal to the <line> element

        var value = d;
        //y-value for current point 
        //(we're just using the raw number from the array,
        //normally it would be something like d.y or d[1] )

        //find next point
        var next = i+1; //x-position (just using index #)
        var nextValue = data[i+1]; //y-position

        if (isNaN(nextValue)){
            // there is no next value,
            // so repeat this point as the end of line
            //(line will have zero length, but the marker will show up)
            next = i;
            nextValue = value;
        }

        d3.select(this) //select this particular <line> element
                        //so that we can use d3 methods

            //set coordinates:
            .attr( 
                {x1: xScale(i),
                 y1: yScale(value),
                 x2: xScale(next),
                 y2: yScale(nextValue)}
                )

            //Set styles for this individual line segment
            //e.g., based on whether value is increasing
            //or decreasing, we can set stroke colour red or black
            .style("stroke", ( (value > nextValue) ?
                              "red" :
                              "black" )
                  );
    });//end of "each" call

However, you could also set them individually, like in this version:

lines = lines.data(data);

lines.enter().append("line");

lines.attr("x1", function(d,i){return xScale(i);})
.attr("x2", function(d,i){
    return xScale( (i+1 == data.length)?i:i+1);
})
.attr("y1", function(d,i){return yScale(d);})
.attr("y2", function(d,i){
    return yScale( (i+1 == data.length)?
                  d:data[i+1]);
})
.style("stroke", function(d,i){
    return ( (d > data[i+1]) ?
             "red" : "black" )
    });

http://fiddle.jshell.net/4xZwb/4/

Answer 2

Take a look at following three jsFiddles. The key idea of the solution is as @AmeliaBR said. Study thoroughly the link implementation in these three graphs (it's fairly simple). I extracted the most important parts of the code.

Red only

.link_dashed {
    fill: none;
    stroke: #ff0000;
    stroke-width: 1.5px;
    stroke-dasharray: 0,20,20,30,10,10,10;
}

Black only

.link_dashed {
    fill: none;
    stroke: #000000;
    stroke-width: 1.5px;
    stroke-dasharray: 20,20,30,10,10,10,0;
}

Red and Black

.link_dashed {
    fill: none;
    stroke: #ff0000;
    stroke-width: 1.5px;
    stroke-dasharray: 0,20,20,30,10,10,10;
}
.link_dashed2 {
    fill: none;
    stroke: #000000;
    stroke-width: 1.5px;
    stroke-dasharray: 20,20,30,10,10,10,0;
}