Question

62

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

rated 0 times [ 69] [ 7] / answers: 1 / hits: 29657 / 10 Years ago, wed, november 19, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaylynkarinam

Add To Favorites

Follow

Total Points: 740

Total Questions: 103

Total Answers: 103

Location: Liechtenstein

Member since Wed, Dec 8, 2021

2 Years ago

answered 10 Years ago jackie · Accepted Answer

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