1

わかりましたので、ここに私の問題を示す画像があります: 間違ったグラフ

ご覧のとおり、グラフ領域の一番下の線は、最初の要素の 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/

ありがとう！

4

1 に答える 1

0

あなたの問題は、行を含めることにありました。それを取り除くと、うまくレンダリングされます。

あなたはこれが必要です

this.path = this.svg.append("g")
    .attr("class", "axis")
    .append("path")
    .datum(this.data)
    .attr('d',this.area)
    .attr("class", "area line graphLine");

http://jsfiddle.net/eamonnmag/brLP2/16/

于 2017-11-23T16:05:38.623 に答える