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

css, d3.js, javascript, jquery

Solution

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

Problem

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 ? http://jsfiddle.net/iamjeannie/b445svob/1/enter link description here ``` var lineData = [ { "x": 1, "y": 5}, { "x": 20, "y": 20}, { "x": 40, "y": 10}, { "x": 60, "y": 40}, { "x": 80, "y": 5}, { "x": 100, "y": 60}, { "x": 120, "y": 15}, { "x": 140, "y": 40}, { "x": 160, "y": 25}, { "x": 180, "y": 20}, { "x": 200, "y": 15}, { "x": 220, "y": 80}, { "x": 240, "y": 35}, { "x": 260, "y": 60} ]; //This is the accessor function we talked about above var lineFunction = d3.svg.line() .x(function(d) { return d.x; }) .y(function(d) { return d.y; }) .interpolate("linear"); //The SVG Container var svgContainer = d3.select("body").append("svg") .attr("width", 200) .attr("height", 200); //The line SVG Path we draw var lineGraph = svgContainer.append("path") .attr("d", lineFunction(lineData)) .attr("stroke", "blue") .attr("stroke-width", 2) .attr("fill", "none"); ```

Original source