set width and height of an SVG element - d3.js

Question

I am using d3 to build up a graph.

Now, i am trying to set width and height of that area ike this -

   var area2 = d3.svg.area()
            .interpolate("monotone")
            .attr("width", this.options.width)
            .attr("height", 100);

But, i get this error --

Uncaught TypeError: undefined is not a function

See here -

NOTE: I have tested and this.options.width is not null - It's value is 1727.

I am new to d3 and SVG, any suggestion will help.

Answer 1

svg.area provides x, y0, and y1 (as was previously stated by In Code). y0 to y1 is bottom to the top - bottom of graph (x axis) to the line if it is a line graph.

Something like this sounds like what you want:

  var area2 = d3.svg.area()
        .x(function(d) { return x(d.X_VARIABLE); })
        .y0(height)
        .y1(function(d) { return y(d.Y_VARIABLE); });

Great example: http://www.d3noob.org/2013/01/filling-area-under-graph.html

As noted by the author, you should be defining your domains for x and y as well (if you have not).