Mastering Data Binding in D3: Essential Methods Explained

Discover how to bind data to DOM elements using D3.js. Learn key methods like data(), enter(), exit(), and datum() for dynamic data-driven visualizations.

Data Binding in D3

Learn how to bind data to DOM elements and create new elements with D3.js. Key methods include:

data(): Binds data to elements.
enter(): Creates placeholders for missing elements.
exit(): Removes extra nodes from the DOM.
datum(): Injects data into a single element.

data()

Syntax


<p>D3 Tutorials</p>

<script>
var myData = ["Hello World!"];
var p = d3.select("body")
    .selectAll("p")
    .data(myData)
    .text(function (d) {
        return d;
    });
</script>

Output


[Displays "Hello World!" in the  element.]

Syntax


<p></p>

<script>
var myData = 100;
var p = d3.select("body")
    .selectAll("p")
    .data(myData)
    .text(function (d) {
        return d;
    });
</script>

Output


[No output, as data() needs an array.]

Syntax


<p></p>
<p></p>
<p></p>

<script>
var myData = ["Hello World!", "Hello D3", "Hello JavaScript"];
var p = d3.select("body")
    .selectAll("p")
    .data(myData)
    .text(function (d) {
        return d;
    });
</script>

Output


[Displays each string from the array in separate  elements.]

Syntax


<body>
<p>D3 Tutorials</p>
</body>

<script>
var myData = [1, 2, 3, 4, 5];
var p = d3.select("body")
    .selectAll("p")
    .data(myData)
    .text(function (d) {
        return d;
    });
</script>

Output


[Displays the first data value (1) in the existing  element. Extra values are ignored.]

enter()

Syntax


<body>

<script>
var data = [4, 1, 6, 2, 8, 9];
var body = d3.select("body")
    .selectAll("span")
    .data(data)
    .enter()
    .append("span")
    .text(function(d) { return d + " "; });
</script>

</body>

Output


[Creates  elements for each data value.]

Syntax


<body>

<script>
var data = [4, 1, 6, 2, 8, 9];
var body = d3.select("body")
    .selectAll("span")
    .data(data)
    .enter()
    .append("span")
    .style('color', function(d) {
        return d % 2 === 0 ? "green" : "red";
    })
    .text(function(d) { return d + " "; });
</script>

</body>

Output


[Colors text green for even numbers and red for odd numbers.]

Syntax


<body>

<script>
var matrix = [
    [1, 2, 3, 4],
    [5, 6, 7, 8],
    [9, 10, 11, 12],
    [13, 14, 15, 16]
];

var tr = d3.select("body")
    .append("table")
    .selectAll("tr")
    .data(matrix)
    .enter()
    .append("tr");

var td = tr.selectAll("td")
    .data(function (d) { return d; })
    .enter()
    .append("td")
    .text(function (d) { return d; });
</script>

</body>

Output


[Creates a table with rows and cells from the two-dimensional array.]

exit()

Syntax


<body>
<p>D3 Tutorials</p>
<p></p>
<p></p>

<script>
    var myData = ["Hello World!"];
    var p = d3.select("body")
        .selectAll("p")
        .data(myData)
        .text(function (d) {
            return d;
        })
        .exit()
        .remove();
</script>
</body>

Output


[Removes extra  elements when data has fewer items.]

datum()

Syntax


<body>
<p>D3 Tutorials</p>

<script>
    d3.select("body")
        .select("p")
        .datum(100)
        .text(function (d) {
            return d;
        });
</script>
</body>

Output


[Sets the  element's text to 100 directly.]

In the next chapter, you'll learn how to load different types of data from files.