title: How to change line color in d3js according to axis value?
body: <p>I want to change  color for this line chart if X > 100 I want it to turn "red"</p>
  
  <p>Is there a way I can use condition within stroke color style based on value of X ? </p>
  
  <p><a href="http://jsfiddle.net/iamjeannie/b445svob/1/" rel="noreferrer">http://jsfiddle.net/iamjeannie/b445svob/1/</a><a href="http://jsfiddle.net/iamjeannie/b445svob/1/" rel="noreferrer">enter link description here</a></p>
  
  <pre><code>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");
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/rIt2X.png" alt="enter image description here"></p>