Learn D3.js

Adding labels

Since the <div> elements in HTML can contain text, you can call the text() method for each <div> and set its contents based on the data:

d3.select("body")        .append("div").attr("class", "bar-chart")        // ...        .text(d => d.distance); // display distance in the <div>

With CSS, we can right-align the text and adjust the fonts. Since these styles are static and don't change with the data, instead of calling style() for each property, you should use a style sheet:

<style>    /* ... */    .bar {        height: 20px;        left: 100px;        background-color: orange;        position: absolute;        text-align: right;        padding: 0 5px;        font-family: sans-serif;        font-size: 9pt;    }</style>

As a result, the labels are placed inside the bars, as follows:

Adding labels to the bars. ...