Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

enter image description here

like image 657
JPC Avatar asked Nov 19 '14 20:11

JPC


2 Answers

I think you can achieve this by defining gradient for the line instead of styling it. Check out this solution here. change color of line graph based on data (red for above threshold of say 0 , and blue for below 0)

I asked a very similar question yesterday and was able to get it working by reading D3 documentation and looking at some samples like this one https://bl.ocks.org/mbostock/3970883

svg.append("linearGradient")
               .attr("id", "line-gradient")
               .attr("gradientUnits", "userSpaceOnUse")
               .attr("x1", 0).attr("y1", y(0))
               .attr("x2", 0).attr("y2", y(2))
               .selectAll("stop")
               .data(
                      [
                       {offset: "100%", color: "blue"},
                       {offset: "100%", color: "red"},
                      ]
                    )
                .enter().append("stop")
                        .attr("offset", function(d) { return d.offset; })
                        .attr("stop-color", function(d) { return d.color; });
like image 56
Jasmeet Singh Avatar answered Nov 13 '22 17:11

Jasmeet Singh


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");
like image 10
Pinguin Dirk Avatar answered Nov 13 '22 16:11

Pinguin Dirk