わかりましたので、ここに私の問題を示す画像があります:
ご覧のとおり、グラフ領域の一番下の線は、最初の要素の Y 位置から最後の要素の Y 位置までの直線としてレンダリングされています。(一番下にあるはず)
その問題を解決するためにY0とY1を設定する必要があると読みましたが、間違っているに違いありません。
私のコードを確認できますか？
以下は、グラフを作成するためのクラス関数です。
function StarvingGraph(container, data, settings){
var thisClass = this;
this.data = data;
this.settings = settings==undefined ? [15,''] : settings;
this.container = container;
this.n = data.length;
this.duration = 500;
this.now = new Date(Date.now() - this.duration);
// this hack renders the data wrong
// this.data.unshift(0);
// this.data.push(0);
this.margin = {top: 0, right: 0, bottom: 0, left: 0};
this.width = $(container).width() - this.margin.right;
this.height = $(container).height() - this.margin.top - this.margin.bottom;
this.graph = {
min:0,
max:parseInt(this.settings[0]*1.40), // the max of the graph will always be 25% more than the threshold
threshold:parseInt(this.settings[0]),
unit:this.settings[1]
}
// set X and Y scalers
this.x = d3.time.scale()
.domain([this.now - (this.n - 2) * this.duration, this.now - this.duration])
.range([0, this.width]);
this.y = d3.scale.linear()
.range([this.height, 0]);
// update the domains
this.x.domain([this.now - (this.n - 2) * this.duration, this.now - this.duration]);
this.y.domain([this.graph.min, this.graph.max]);
// Define the line that goes over the graph
this.line = d3.svg.line()//.interpolate("basis")
.x(function(d, i) { return thisClass.x(thisClass.now - (thisClass.n - 1 - i) * thisClass.duration); })
.y(function(d, i) { return thisClass.y(d); });
// Define the area under the line
this.area = d3.svg.area()
.x(function(d,i) { return thisClass.x(thisClass.now - (thisClass.n - 1 - i) * thisClass.duration); })
.y0(thisClass.height) // bottom ??
.y1(function(d) { return thisClass.y(d); }); // top
// create the SVG inside the container
this.svg = d3.select(container).append("svg")
.attr("width", this.width + this.margin.left + this.margin.right)
.attr("height", this.height + this.margin.top + this.margin.bottom)
.style("margin-left", -this.margin.left + "px")
.append("g")
.attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
// Create the path
this.path = this.svg.append("g")
.attr("class", "axis")
.append("path")
.datum(this.data)
.attr('d',this.area)
.attr("class", "area line graphLine");
// draw the line to the path
this.svg.select(".graphLine")
.attr("d", this.line)
.attr("transform", null);
// From here on are just decorative elements
// line the lines with the percentages
// add the top line
this.svg.append('line')
.attr("x1",0)
.attr("y1",this.y(this.graph.max)+1)
.attr("x2",this.width)
.attr("y2",this.y(this.graph.max)+1)
.attr("class", "line");
// add the threshold line (dashed)
this.svg.append('line')
.attr("x1",38)
.attr("y1",this.y(this.graph.threshold))
.attr("x2",this.width)
.attr("y2",this.y(this.graph.threshold))
.attr("class", "line dashed red");
// add the top text
this.svg.append("svg:text")
.attr("dy", 12)
.attr("dx", 0)
.attr('height', 100)
.attr('class','graphText')
.text(this.graph.max+this.graph.unit);
// add the threshold text
this.svg.append("svg:text")
.attr("dy", this.y(this.graph.threshold)+4)
.attr("dx", 0)
.attr('height', 100)
.attr('class','graphText red')
.text(this.graph.threshold+this.graph.unit);
}
そして、これはそれを実行する方法の例です:
var x = new StarvingGraph('#testdiv',[10,50,0,90,10,50,0,90,10,50,0,90,10,50,0,90,10,50,0,90,10,50,0,90,10,50,0,90],["100","%"]);
... #testdiv は単なるコンテナです。必要に応じて body を使用することもできます (幅または高さが 0 でない限り)。
ここにフィドルがあります：http://jsfiddle.net/brLP2/1/
ありがとう！