d3.svg.line() Fehler: Uncaught TypeError: Kann die Eigenschaft 'line' von undefined nicht lesen

Question

Ich verwende den folgenden Code, um einen Pfad mit d3.js zu zeichnen Ich habe verschiedene Codebeispiele im Internet über versucht das gleiche und haben überall den gleichen Fehler bekommen.

Es folgt die JS:

<script type="text/javascript"> 
    var svg; 
    //The data for our line 
lineData = [ { "x": 1, "y": 5}, { "x": 20, "y": 20}, 
       { "x": 40, "y": 10}, { "x": 60, "y": 40}, 
       { "x": 80, "y": 5}, { "x": 100, "y": 60}]; 

//This is the accessor function we talked about above 
var lineFunction = d3.svg.line() 
         .x(function(d) { return d.x; }) 
         .y(function(d) { return d.y; }) 
         .interpolate("linear"); 

//The SVG Container 
var svgContainer = d3.select("body").append("svg:svg") 
            .attr("width", 200) 
            .attr("height", 200); 

//The line SVG Path we draw 
var lineGraph = svgContainer.append("path") 
          .attr("d", lineFunction(lineData)) 
          .attr("stroke", "blue") 
          .attr("stroke-width", 2) 
          .attr("fill", "none"); 
    </script> 

Der Fehler ist: Uncaught Typeerror: kann Eigenschaft 'line' undefinierter

lesen Dies kommt zu der folgenden Zeile: var lineFunction = d3.svg.line()

I Ich bin mir nicht sicher, was "undefiniert" hier bedeutet. Irgendwelche Leads?

Answer 1

Lesen Sie Ihre comment Ich nehme an, Sie verwenden D3 v4. Ab gibt es keine d3.svg, daher die Fehlermeldung. Der Liniengenerator, nach dem Sie suchen, ist jetzt als d3.line() definiert.

Wenn Sie noch die Version 3 verwenden, ist es stattdessen d3.svg.line().

---

Auch, wie andere Beantworter festgestellt haben, wird dies zu einem Follow-up-Fehler führen, wenn der Rest der Aussage unberührt wie d3.line Verlassen einer Methode .interpolate() nicht verfügen. D3 v4 hat hierfür curve factories, die zur Interpolation verwendet werden. Diese Fabriken werden unter Verwendung von line.curve() dem Liniengenerator zugeführt. D3 v3 .interpolate("linear") wird jetzt .curve(d3.curveLinear). Da jedoch line.curve() standardmäßig d3.curveLinear ist, kann dies in Ihrem Fall sicher weggelassen werden.

Die Aussage wird so:

var lineFunction = d3.line() 
    .x(function(d) { return d.x; }) 
    .y(function(d) { return d.y; }) 
    .curve(d3.curveLinear);   // Use for clarity, omit for brevity. 

Answer 2

Achten Sie darauf, Ihren Code in das folgende Syntax geändert hat, da es keine d3.svg Version in 4.

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

Answer 3

[Update ist ]

Auch, wenn Sie D3js v4 verwenden, ein Problem mit dieser Aussage .interpolate("linear"); wird mit dieser Warnung angezeigt:

d3.line(...).x(...).y(...).interpolate is not a function.

curve(d3.curveLinear);

Wie in der Beschreibung von curveLinear:

In dieser neuen Version .interpolate("linear"); soll geändert werden.