negative values in line chart

[Puneet Kishor]

y = d3.scale.linear().domain([ymin, ymax]).range([height, 0])

where 'ymin' is negative and 'ymax' is positive results in a chart with its origin set at [0, ymin] so all of the chart is above the xAxis. I'd rather have the origin at [0, 0] and the negative values below the xAxis. How do I achieve that?



--
Puneet Kishor

[jerome cukier]

the x axis is where you choose to draw it.
assuming you have a container svg of width w,
if with this settings you do

svg.append("line").attr("x1",
0).attr("x2",w).attr("y1",y(0)).attr("y2",y(0)) then you will draw the
x axis in a place consistent with the rest of the chart.

alternatively, if the x axis needs to sit at height pixels from the
top, you can try y=d3.scale.linear().domain([0,ymax]).range([height,
0]).
now, any negative value passed to y will get a value greater than
height in return. While some browsers allow for this I don't recommand
trying to draw outside your svg container.

[Puneet Kishor]

On May 2, 2012, at 11:30 AM, jerome cukier wrote:

> the x axis is where you choose to draw it.
> assuming you have a container svg of width w,
> if with this settings you do
>
> svg.append("line").attr("x1",
> 0).attr("x2",w).attr("y1",y(0)).attr("y2",y(0)) then you will draw the
> x axis in a place consistent with the rest of the chart.

I tried that, but that is not quite what I want. See [http://dl.dropbox.com/u/3526821/a.png]

I want the rendition at the bottom, but I get the one at the top.



--
Puneet Kishor

[Ziggy Jonsson]

For simple stuff just draw line and the fill area separately:

http://jsfiddle.net/nftVT/ 

... but if you want to be able to format the areas differently you might want to use two clipPaths (one above the x-axis and another one below) and draw the fill area once under each clip-path.

http://jsfiddle.net/mxrVB/ 

[Ziggy Jonsson]

Sorry the second link should be:

http://jsfiddle.net/mxrVB/1/