Javascript D3.js面积图渲染不正确

Javascript D3.js面积图渲染不正确,javascript,html,svg,charts,d3.js,Javascript,Html,Svg,Charts,D3.js,好的,这里有一张图片说明了我的问题: 如您所见,图形区域的底线呈现为从第一个元素的Y位置到最后一个元素的Y位置的直线。它应该在底部 我读到Y0和Y1是解决这个问题的工具,但我肯定是做错了 你能查一下我的密码吗 以下是用于创建图形的类函数: function StarvingGraph(container, data, settings){ var thisClass = this; this.data = data; this.settings = settings==undefined ?

好的,这里有一张图片说明了我的问题:

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

这是一把小提琴:


谢谢

您的问题在于是否包含该行。移除该选项,它将呈现良好效果

你只需要这个

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

好的,我找到了一个临时解决方案。如果我在序列的开头和结尾加上零,然后限制域,这样它们就不会显示。。。它实际上渲染正确。这有点傻透了。我把这个问题留着,看看有没有人能告诉我发生了什么。嘿,我无意中发现了你的问题。我今天遇到了同样的问题,找到了同样的解决方案。你不认为现在有更好的吗?