Désolé, j'ai pas réussi à faire une meilleure formulation du truc pour le titre.
Dans le tutoriel de D3, y'a ce bout de code :
<!DOCTYPE html>
<div id="container"></div>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
// Declare the chart dimensions and margins.
const width = 640;
const height = 400;
const marginTop = 20;
const marginRight = 20;
const marginBottom = 30;
const marginLeft = 40;
// Declare the x (horizontal position) scale.
const x = d3.scaleUtc()
.domain([new Date("2023-01-01"), new Date("2024-01-01")])
.range([marginLeft, width - marginRight]);
// Declare the y (vertical position) scale.
const y = d3.scaleLinear()
.domain([0, 100])
.range([height - marginBottom, marginTop]);
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
// Add the x-axis.
svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x));
// Add the y-axis.
svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y));
// Append the SVG element.
container.append(svg.node());
</script>
Je me suis senti très confus parce que la variable container
utilisé à la fin n'est jamais déclaré et pourtant elle tourne le code marche.
Après divers tests je me suis rendu compte la variable container
contenait une référence vers le nœud d'id container
, comme si un let container = document.getElementById("container")
était fait automagiquement.
Et ça marche pour tous les id.
<!DOCTYPE html>
<div id="bli"></div>
<div id="bla"></div>
<div id="blo"></div>
<script type="module">
console.log(bli, bla, blo) // <div id="bli"> <div id="bla"> <div id="blo">
</script>
Est-ce que quelqu'un aurait un lien vers MDN qui décrit cette fonctionnalité ? Je n'arrive pas à trouver les bons mots clefs à donner à manger à mon moteur de recherche préféré.
# Modération
Posté par gUI (Mastodon) . Évalué à 4.
Déplacé vers les forums car il s'agit d'une question.
En théorie, la théorie et la pratique c'est pareil. En pratique c'est pas vrai.
# Deprecated
Posté par Matthieu Moy (site web personnel) . Évalué à 6.
A priori c'est un comportement historique mais non-standard, à éviter :
https://stackoverflow.com/questions/12510399/do-i-really-need-to-call-getelementbyid
[^] # Re: Deprecated
Posté par Christophe . Évalué à 5.
En lisant plus avant les réponses, c'est plus compliqué, on retrouve ce comportement dans les doc du w3c…
# et pourtant
Posté par NeoX . Évalué à 2.
ton container est bien definit
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.