javascript - D3.js 面积图渲染不正确

Question

好的，这是一张说明我的问题的图片:

如您所见，图形区域的底线呈现为从第一个元素的 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)。

这是一个 fiddle :http://jsfiddle.net/brLP2/1/

谢谢!

Answer 1

您的问题在于包含该行。删除它，它渲染得很好。

你只需要这个

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/