Hi Daniel. Your last line there, .attr('id','key.id'), will set the id attribute of every circle element to be the same thing, the literal string “key.id”. For it to be dynamic (different for every circle, based on an id property in the bound data object), you’d have to pass a function as the second argument of attr, like:
.attr("id", function(d) { return d.id; })
or, equivalently:
.attr("id", (d) => d.id)
The next question is, what’s “d” there? In your case I think it’d be one of the elements of the “values” array. I can’t see what those objects are like, though it looks like they at least have “date” and “measurement” properties. If those objects have the “id” you’d want to use, I think you should be all set.
But if the id you want to use is up in that parent array (TemperatureExterieure, TemperatureBallon, Humidite, etc.), you won’t have access to it in that “d” object, and D3 doesn’t pass it in. (This common issue is discussed here.) So you have a few options:
1 — Access the bound data of the parent. It looks like your circles are appended to a selection called “lines” (which may be <G> elements?); I think the id should be attached to the elements of that selection:
.attr("id", function(d) {
return d3.select(this.parentNode).datum().id;
})
2 — Rewrite the code to keep a reference to the parent’s data. For example:
lines.each(function(parentData) {
d3.select(this)
.selectAll("circle")
.data(parentData.values)
.enter()
.append("circle")
.attr("id", parentData.id)
})
3 — Transform the data to be more “tidy”, so each element of values also has the id:
data = data.map(({id, values}) => ({id, values: values.map(d => ({...d, id}))}))
Let me know if that works. If you post an example notebook, we may be able to give more specific advice.
