d3.js area() 在使用梯度函数的线下 - x 值仅覆盖图形的一部分答案

【问题标题】：d3.js area() under a line using gradient function- x value only covering part of the graphd3.js area() 在使用梯度函数的线下 - x 值仅覆盖图形的一部分
【发布时间】：2016-03-22 15:27:21
【问题描述】：

我正在尝试使用 d3.js 创建一个折线图，它采用 csv 输入并将其转换为具有键 x1、x2、类的数据数组。使用该数据，我使用权重和梯度函数创建感知器决策边界，该函数在每次迭代后更新和转换。这很好用。我正在努力解决的是曲线下的区域，因为我希望正值是蓝色，负值是红色。这些区域正确地随着线移动，但是 x 值有问题，因为该区域的宽度没有覆盖整个图形。它覆盖了大约一半，大约从四分之一开始（我无法发布图片。）这是我用于所有这些元素的代码，但我认为我误解了 area 使用 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)");

任何帮助将不胜感激。

【问题讨论】：

标签： javascript d3.js graph machine-learning area

【解决方案1】：

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

【讨论】：