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值上按升序对数组进行重新排序，它现在可以正常工作。我希望这有助于某人。

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

1 个答案: