d3.js area（）在使用梯度函数的x线下-仅覆盖部分图形的x值

Question

我正在尝试使用d3.js创建折线图，该折线图使用csv输入并将其转换为具有键x1，x2，class的数据数组。 使用这些数据，我使用权重和梯度函数创建一个感知器决策边界，该边界将在每次迭代后进行更新和转换。 这很好。 我正在努力的是曲线下的面积，因为我希望正值是蓝色，负值是红色。 区域可以正确地沿直线移动，但是x值出了点问题，因为区域的宽度不能覆盖整个图形。 它覆盖了大约一半，大约占开始时间的四分之一（我无法发布图像。）这是我用于所有这些元素的代码，但是我想我误会了区域使用x的方式属性;

lineFunction = d3.svg.line()
        .x(function(d) { return widthScale(d.x1); })
        .y(function(d) { return heightScale(((-d.x1 * w1) - w0)/w2); })
        .interpolate("linear");

    var area = d3.svg.area()
        .x(function(d) { return widthScale(d.x1); })
        .y0(xPos)
        .y1(function(d) { return heightScale(((-d.x1 * w1) - w0)/w2); })
        .interpolate("linear");

    var area2 = d3.svg.area()
        .x(function(d) { return widthScale(d.x1); })
        .y0(heightAlter)
        .y1(function(d) { return heightScale(((-d.x1 * w1) - w0)/w2); })
        .interpolate("linear");

    lineGraph = canvas.append("path")
        .attr("d", lineFunction(lineData))
        .attr("class", "autoLine")
        .attr("stroke", "black")
        .attr("stroke-width", 1)
        .attr("fill", "none")
        .attr("clip-path", "url(#clip)");

    shadedArea = canvas.append("path")
        .data([data])
        .attr("d", area)
        .attr("class", "area")
        .attr("clip-path", "url(#clip)");

    shadedAreaPos = canvas.append("path")
        .data([data])
        .attr("d", area2)
        .attr("class", "area2")
        .attr("clip-path", "url(#clip)");

任何帮助将非常感激。

Answer 1

我设法发现问题的根源是数据数组的排序方式。 我不完全了解幕后情况，但是通过简单地按x1值的升序对数组进行重新排序，它现在可以正常工作。 我希望这可以帮助别人。