La función d3.creator() se utiliza para devolver una función que crea un elemento cuyo nombre se proporciona como parámetro en la función.
Sintaxis:
d3.creator( name );
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- name: Es el nombre del contenedor o etiqueta HTML a crear.
Valor devuelto: Devuelve una función.
Ejemplo 1: en este ejemplo, agregar el elemento div dentro del cuerpo.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" path1tent=
"width=device-width,initial-scale=1.0">
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-selection.v1.min.js">
</script>
<style>
div {
background-color: green;
color: honeydew;
width: fit-content;
padding: 10px;
}
</style>
</head>
<body>
<!-- No div tag is added here -->
<script>
let selection = d3.select("body")
// Creating and appending
// a div to the body
selection.append(d3.creator("div"));
let div = document.querySelector("div")
div.innerText =
"Div tag created using d3.creator()"
</script>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, agregar varias etiquetas al cuerpo.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" path1tent=
"width=device-width,initial-scale=1.0">
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-selection.v1.min.js">
</script>
<style>
div {
background-color: green;
color: honeydew;
width: fit-content;
padding: 10px;
height: 100px;
}
</style>
</head>
<body>
<!-- No div tag is added here -->
<script>
var selection = d3.select("body")
// Creating and appending a
// div to the body
selection.append(d3.creator("div"));
var selection = d3.select("body")
// Creating and appending a p
// tag to the div
selection.append(d3.creator("p"));
// Creating and appending a button
// tag to the div
selection.append(d3.creator("button"));
var div = document.querySelector("div")
div.innerHTML =
"Div tag created using d3.creator()"
var div = document.querySelector("p")
div.innerHTML =
"paragraph tag created using d3.creator()"
var div = document.querySelector("button")
div.innerHTML =
"paragraph tag created using d3.creator()"
</script>
</body>
</html>
Producción:
