CODEWITHSUNDEEP
d3.js
Learner
Learner

Reputation: 11

d3 mulitple area chart converstion to line charts

I have this d3 chart java script 

 this.area = d3.svg.area()                                                       .interpolate("basis")
.x(function(d) { return xS(d.Year); })
.y0(this.height)
.y1(function(d) { return yS(d[localName]); });

http://jsfiddle.net/v9k9s/LHC3R/10/

and need to convert to line chart instead of area chart any help would be appreciated

Upvotes: 0

Views: 500

Answers (1)

mgraham
mgraham

Reputation: 6207

Simply change to d3.line - https://github.com/d3/d3/wiki/SVG-Shapes#line - from d3.area.

Main change is that d3.line only has a y function rather than y0 and y1 as it's a 1-dimensional path not 2d, 

 this.area = d3.svg.line()
        .interpolate("basis")
        .x(function(d) { return xS(d.Year); })
        //.y0(this.height)
        .y(function(d) { return yS(d[localName]); });

Later on change the color function to apply to the stroke not the fill

 .attr("stroke", function (d,i) { return colours(options.id); });

And in the css remove the fill altogether from the paths

  path.chart { fill: none; }

http://jsfiddle.net/LHC3R/11/

Upvotes: 2

Related Questions