web-dev-qa-db-fra.com

Erreur d3.svg.line (): TypeError non capturé: impossible de lire la propriété 'ligne' de non défini

J'utilise le code suivant pour essayer de tracer un chemin à l'aide de d3.js. J'ai essayé divers exemples de code sur le Web à propos de la même chose et j'ai eu la même erreur partout.

Voici le 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'erreur est: TypeError non capturé: impossible de lire la propriété 'ligne' de non défini

Cela vient à la ligne suivante: var lineFunction = d3.svg.line()

Je ne sais pas ce que signifie "non défini" ici. Des pistes?

javascriptd3.js
27
Arihant

Lire votre commentaire Je suppose que vous utilisez D3 v4 . Depuis version 4 il n'y a pas de d3.svg, D'où le message d'erreur. Le générateur de ligne que vous recherchez est maintenant défini comme d3.line() .

Si vous utilisiez toujours la version 3, ce serait d3.svg.line() à la place.

En outre, comme d'autres répondants l'ont noté, cela entraînera une erreur de suivi lorsque le reste de l'instruction ne sera pas modifié car d3.line Ne comporte pas de méthode .interpolate(). D3 v4 a usines de courbe à cet effet, qui sont utilisés pour l'interpolation. Ces usines sont fournies au générateur de ligne à l'aide de line.curve() . .interpolate("linear") de D3 v3 devient maintenant .curve(d3.curveLinear). Cependant, puisque line.curve() est par défaut d3.curveLinear, Cela peut être omis en toute sécurité dans votre cas.

L'énoncé devient ainsi:

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.
70
altocumulus

Assurez-vous que votre code a été modifié dans la syntaxe ci-dessous car il n'y a pas d3.svg dans la version 4.

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

[Mise à jour]

De plus, si vous utilisez D3js v4, un problème avec cette instruction .interpolate("linear"); se produira avec cet avertissement:

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

Dans cette nouvelle version, .interpolate("linear"); doit être changé en:

curve(d3.curveLinear);

Comme dans la description de curveLinear .

1
Huyen