d3 append a svg with constant area

Question

I have a svg element to which I want to append an area whose end-points are constant/calculated already. Now If I call this area by passing data to it and then plotting it as function over x-axis it works fine and I also see the color filled-area. However if I mark all end points eg: x0,x1,y0,y1 then the area does not show or doesnt fill color. Is it possible to append constant area to svg and if yes then how? The previous question was deviating so I was asked to make a new question which is specific. Previous Question

Created a fiddle here to show my problem : Problem

var percentArea = d3.svg.area()
// do not want to use this    .x(function(d){return x(d.date);})
                    .x0(0)
                    .x1(width)
                    .y0(0)
                    .y1(height);

svg.append("path")
    .datum(data)
    .attr("class","area")
    .attr("d",percentArea);

Note if possible i do not want to pass data by setting datum here as end points are constant.

Answer 1

I wouldn't try to use the d3.svg.area() path generator for what you're trying to do. If all you want is a background fill you should be able to do that with a simple rectangle. Here's my attempt from your fiddle:

svg.append("rect")
   .attr("x", 0)
   .attr("y", 0)
   .attr("width", width)
   .attr("height", height)
   .style("fill", "orange");

 var margin = {top: 20, right: 20, bottom: 30, left: 50}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var parseDate = d3.time.format("%d-%b-%y").parse; var x = d3.time.scale() .range([0, width]); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); var area = d3.svg.area() .x(function(d) { return x(d.date); }) .y0(height) .y1(function(d) { return y(d.close); }); var percentArea = d3.svg.area() // do not want to use this .x(function(d){return x(d.date);}) .x0(0) .x1(width) .y0(0) .y1(height); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.tsv("data.tsv", function(error, data) { data = [ { "date":"1-May-12", "close":582.13 }, { "date":"30-Apr-12", "close":583.98 }, { "date":"27-Apr-12", "close":603 }, { "date":"26-Apr-12", "close":607.7 }, { "date":"25-Apr-12", "close":610 }, { "date":"24-Apr-12", "close":560.28 }, { "date":"23-Apr-12", "close":571.7 }, { "date":"20-Apr-12", "close":572.98 }, { "date":"19-Apr-12", "close":587.44 }, { "date":"18-Apr-12", "close":608.34 }, { "date":"17-Apr-12", "close":609.7 }, { "date":"16-Apr-12", "close":580.13 }, { "date":"13-Apr-12", "close":605.23 }, { "date":"12-Apr-12", "close":622.77 } ]; data.forEach(function(d) { d.date = parseDate(d.date); d.close = +d.close; }); x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([0, d3.max(data, function(d) { return d.close; })]); //svg.append("path") // .datum(data) // .attr("class", "area") /// .attr("d", area); svg.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .style("fill", "orange"); //THIS PART MAKES AREA OF CONSTANT SIZE BUT NEED TO PASS DATA TO IT. svg.append("path") .datum(data) .attr("class","area") .attr("d",percentArea); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Price ($)"); }); 

 body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .area { fill: steelblue; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div class="plotgraph"></div>