This example shows how to implement Ann K. Emery’s technique of placings labels directly on top of a line in D3 4.0 Alpha.
To construct the multi-series line chart, the data is first transformed into separate arrays for each series. (The series names are automatically derived from the columns in the TSV file, thanks to a new dsv.parse feature.)
var series = data.columns.slice(1).map(function(key) {
return data.map(function(d) {
return {
key: key,
date: d.date,
value: d[key]
};
});
});
A label is rendered for each point in each series. Beneath this label, a white rectangle is added, whose size and position is computed automatically using element.getBBox plus a little bit of padding. The resulting label is thus legible. The last label for each series gets an additional tspan to show the series name.
It seems there is a change between the 4.0-alpha and 4.2 that prevents this from working?
Cloning the gist and updating the reference to
<script src="http://d3js.org/d3.v4.min.js"></script>
results in empty white boxes (no labels).This, I'm figuring, has to do with:
And the fact that in the 4.0-alpha version it results in:
And in 4.2 it results in:
I also had to change
this.previousSibling
tothis.nextSibling
.For some reason in 4.2, the order of elements is reversed, and the text is hidden under the rectangle.
It seems like an easy fix, but I don't have a clue.
Ideas?