Errore d3.svg.line(): Uncaught TypeError: Impossibile leggere la proprietà 'line' di undefined

Question

Sto usando il seguente codice per provare a disegnare un percorso usando d3.js Ho provato vari esempi di codice sul web riguardo lo stesso e hanno avuto lo stesso errore ovunque.

che segue è la 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> 

L'errore è: TypeError Uncaught: Impossibile leggere proprietà 'line' di indefinito

Questo avviene nella seguente riga: var lineFunction = d3.svg.line()

I non sono sicuro di cosa significhi "indefinito" qui. Qualche vantaggio?

Answer 1

Leggere il tuo comment Suppongo che stia usando D3 v4. A partire da version 4 non c'è lo d3.svg, quindi il messaggio di errore. Il generatore di linee che stai cercando è ora definito come d3.line().

Se si utilizza ancora la versione 3, sarà invece d3.svg.line().

---

Inoltre, come altri answerers hanno notato, questo porterà ad un errore di follow-up al momento di lasciare il resto della dichiarazione intatta come d3.line non dispongono di un metodo di .interpolate(). D3 v4 ha curve factories per questo scopo, che vengono utilizzati per l'interpolazione. Queste fabbriche vengono fornite al generatore di linea utilizzando line.curve(). D3 v3's .interpolate("linear") diventa .curve(d3.curveLinear). Tuttavia, dal line.curve() predefinito a d3.curveLinear questo può tranquillamente essere omesso nel tuo caso.

La dichiarazione diventa così:

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

assicurarsi che il codice ha modificato nella sintassi di seguito in quanto non v'è alcuna d3.svg nella versione 4.

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

Answer 3

[Update ]

Inoltre, se si utilizza D3js v4, un problema con questa istruzione .interpolate("linear"); si verificherà con questo avviso:

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

In questa nuova versione, .interpolate("linear"); dovrebbe essere cambiata a:

curve(d3.curveLinear);

Come nella descrizione di curveLinear.