d3.js Bereich() unter einer Linie mit Gradientenfunktion- x Wert nur für einen Teil des Diagramms

Question

Ich versuche, ein Liniendiagramm mit d3.js zu erstellen, die eine CSV-Eingabe und konvertiert es in ein Datenarray mit die Schlüssel x1, x2, Klasse. Unter Verwendung dieser Daten erstelle ich eine Perzeptron-Entscheidungsgrenze unter Verwendung von Gewichtungen und der Gradientenfunktion, die nach jeder Iteration aktualisiert und übergeht. Das funktioniert gut. Womit ich mich abmühen muss, ist die Fläche unter der Kurve, da ich möchte, dass positive Werte blau und negativ rot sind. Die Bereiche bewegen sich mit der Linie korrekt, aber etwas stimmt nicht mit den X-Werten, da die Breite des Bereichs nicht den gesamten Graphen abdeckt. Es deckt ungefähr die Hälfte ab und beginnt ungefähr ein Viertel des Weges hinein (ich kann kein Bild posten). Hier ist der Code, den ich für all diese Elemente verwende, aber ich denke ich missverstand die Art, wie der Bereich verwendet wird x Attribut;

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)"); 

Jede Hilfe würde sehr geschätzt werden.

Answer 1

Ich stellte fest, dass die Wurzel des Problems die Art war, in der das Datenarray geordnet wurde. Ich verstehe nicht ganz, was hinter den Kulissen passiert, aber durch einfaches Umordnen des Arrays in aufsteigender Reihenfolge der x1-Werte funktioniert es nun korrekt. Ich hoffe, das hilft jemandem.