How to change line color in d3js according to axis value?

Question

I want to change color for this line chart if X > 100 I want it to turn \"red\"

Is there a way I can use condition within stroke color style based on value of X ?

Answer 1

Here's another way, maybe in some instances that might help:

All I do is split the data by using a filter:

var lineGraph1 = svgContainer.append("path")
        .attr("d", lineFunction(lineData.filter(function(d) {
            return d.x <= 100;
        })))
        .attr("stroke", "blue")
        .attr("stroke-width", 2)
        .attr("fill", "none");
var lineGraph2 = svgContainer.append("path")
        .attr("d", lineFunction(lineData.filter(function(d) {
            return d.x >= 100;
        })))
        .attr("stroke", "red")
        .attr("stroke-width", 2)
        .attr("fill", "none");