d3 append simple area

Question

I want to append simple area to my chart with end points of area values as constants.

percentArea = d3.svg.area()
      .interpolate('linear')
      .x0(0)
      .x1(w)
      .y0(h/4)
      .y1(h);

I want to append this area directly and give it a color fill. Thanks for help. I am having specially hard time trying to get the area fill. The chart shows a line over the area but no fill when I tried.

Edit: Trying to make the question more clear and specific : The issue I face is only when I try to call my function without passing data. The area fill works as expected when I call percentArea(data). However I am unable to understand why I must pass data when endpoints of my area are constant.

Answer 1

You need to ensure that the path you have rendered is being filled. There are two ways you can do this:

Set a Style

path.style("fill", "steelblue");

Set a class and leverage CSS

path.attr("class", "filled-area");

// In CSS
.filled-area {
    fill: steelblue;
}

Here's a quick example:

Area Chart with a Stroke:

Area Chart with no fill

As you can see this defaults to black

Area Chart with correct fill