Wie passe ich eine Polynomkurve mit D3 an?

Ich muss folgende D3 Code in index.html:Wie passe ich eine Polynomkurve mit D3 an?

<!DOCTYPE html> 
<svg width="960" height="500"></svg> 
<script src="https://d3js.org/d3.v4.min.js"></script> 
<script> 

var svg = d3.select("svg"), 
    margin = {top: 60, right: 20, bottom: 40, left: 50}, 
    width = +svg.attr("width") - margin.left - margin.right, 
    height = +svg.attr("height") - margin.top - margin.bottom, 
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var x = d3.scaleLinear() 
    .rangeRound([0, width]); 

var y = d3.scaleLinear() 
    .rangeRound([height, 0]); 

var line = d3.line() 
    .x(function(d) { return x(d.error); }) 
    .y(function(d) { return y(d.close); }); 

d3.tsv("data.tsv", function(d) { 
    d.error = d.error; 
    d.close = +d.close; 
    return d; 
}, function(error, data) { 
    if (error) throw error; 

    x.domain(d3.extent(data, function(d) { return d.error; })); 
    y.domain(d3.extent(data, function(d) { return d.close; })); 

    g.append("g") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x)) 
     .select(".domain") 
     .remove(); 

    g.append("g") 
     .call(d3.axisLeft(y)) 
     .append("text") 
     .attr("fill", "#000") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", "0.71em") 
     .attr("text-anchor", "end") 
     .text("Error (%)"); 

    g.append("path") 
     .datum(data) 
     .attr("fill", "none") 
     .attr("stroke", "steelblue") 
     .attr("stroke-linejoin", "round") 
     .attr("stroke-linecap", "round") 
     .attr("stroke-width", 1.5) 
     .attr("d", line); 
}); 

</script>

Die data.tsv sieht wie folgt aus:

error close 
100 93.24 
200 -85.35 
300 53.89 
400 -18.57 
500 198.1 
600 -8.4 
700 98.623 
800 9.89 
900 118.56 
1000 98.71

Ich möchte eine Kurve an die Datenpunkte passen. Im Moment verbindet dieser Code nur die Datenpunkte mit geraden Linien. Es sieht wie folgt aus:

Ich frage mich, wie kann ich stattdessen eine Polynomkennlinie passen.

Quelle

2017-09-12 Istvan

Sie können die Interpolationsfunktion für Ihre Kurve auswählen. Blick auf diese Demo-Seiten - https://bl.ocks.org/d3noob/ced1b9b18bd8192d2c898884033b5529 http://bl.ocks.org/emmasaunders/c25a147970def2b02d8c7c2719dc7502

var line = d3.line() 
    .x(function(d) { return x(d.error); }) 
    .y(function(d) { return y(d.close); }) 
    .curve(d3.curveCardinalClosed);

d3 curves documentation.

Quelle

2017-09-12 08:25:05

Sie müssen die line.curve ([curve]) verwenden. Als Parameter übergeben Sie einen Kurventyp auch Teil von d3. Dieser Link enthält ein gutes Beispiel: https://bl.ocks.org/pstuffa/26363646c478b2028d36e7274cedefa6

Und die api Referenz: https://github.com/d3/d3-shape/blob/master/README.md#line_curve

Quelle

2017-09-12 08:26:52

Wie passe ich eine Polynomkurve mit D3 an?

Antwort

Verwandte Themen