Add id from Array/Object to svg circle

[lopesdaniel2001]

Hello i have the following aray :

That i use to add circle with the following code :

lines.selectAll("circle")
    .data(function(d) {return d.values})
    .enter()
    .append("circle")
	.attr("cx", function(d) { return xScale(d.date); })
	.attr("cy", function(d) { return yScale(d.measurement); })
	.attr("r", 10)
	.attr("fill", "#3498db")
    .attr("stroke", "#fff")
    .attr("stroke-width", "1.5px")
    .attr("fill", "#CCE5F6")
    .style("opacity", 0)	
	.on('mousemove', function(e, d) {	 
			d3.select(this)
			.on("mouseover", (event, d) => logMeasurement(event, d))

Now i would like to attach to each circle the coresponding id from the array. I have tried thing like this :

.attr('id','key.id')

but i didn’t get any results.
Thanks

[m_hutley]

.attr("id", function(d) { return d.id; })

[lopesdaniel2001]

Hello I have tried this but seems not working, to see if was working i did this

.attr("id", function(d) { console.log( d.id); })

Then in the console log i get 3432 times undefined. But i am not sure if this test is reliable

[m_hutley]

So your values entries dont have an id. (I cant tell, because you havent shown us what one of the values looks like).

Do you mean their array index?

.attr("id", function(d,i) { return i; })

[lopesdaniel2001]

Ok sorry but i don’t succeed to understood all the subtility of the Array/Object index, id , key. This is confuse for me.
I have tried your last answer and then i get my circles with number id.
I want to have as on picture the name TemperatureExterieur then TemperatureBallon and so on.

[lopesdaniel2001]

The internal structure looks like this :

[m_hutley]

okay so… let me… just… try and understand here.

Slices is an array of objects, which contains an array of objects in its “values” property.

You’re trying to plot all of these values, all… 429*8 (maths…) 3432 of them, as circles.

You… probably want to be able to differentiate them, based on… i’m going to assume color. So Red for exterior temperature, Blue for humidity, and the like.

How close am I?

[lopesdaniel2001]

100% Perfect this is the target to modifiy color and hilight

[m_hutley]

Okay.

We probably could have saved ourselves a lot of time earlier this year if I had understood what you were attempting to do when we came up with the means to create Slices in the first place, but… here we are.

I started writing this out, but it became easier to do it in a pen myself.

The scale is not great, considering some of your values (ProductionPV) are at low values, while EauDepart and Retour are high values.

[m_hutley]

EDIT: And because i’m a glutton for punishment, I tried a very quick, not at all good multi-scaling:

[lopesdaniel2001]

Ok i don’t know where to start but i will try to clarify and thanks for your time.
1- You rewrite the array so i think this is changing the ‘structure’ of my original array of object isn’t it ?
This i want to avoid because i work with this structure for other elements and i start to very faraway from my knoledge.
The result i have are like this :

So in the upper menu i can choose from witch date start and end my data, choose between Database local or distant and a scale from 6 seconds, 5 minutes or 30 minutes.
The circle are drawn for the tooltip using mouse over and they have opacity 0.
As you can see now i have the problem that the name given to the curve are overlaping each others. This is why i was thinking that i can get the id of the circle to add a window showing the the name only of the curve where the mouse is pointing. As i discover that when drawing svg i was needed to draw the tooltip at the end because the text was behind the curves.

So i just wondering if i can use your answer without rewritting a lot of things ?
I have adde an id to each lines but now as they are draw first i can’t get the id of the line because it’s behind the cercle.

[lopesdaniel2001]

Ok maybe too fast but i think i can use your code here :

let antiSlice = [];
retour.forEach((point) => {
  for (var property in point) {
    if (point.hasOwnProperty(property) && property != "MoyDate") {
      antiSlice.push({
        prop: property,
        date: new Date(point.MoyDate),
        value: point[property]
      });
    }
  }
});

So i will test it thanks

[lopesdaniel2001]

Hi so i finally get an answer witch can be usefull with this line code :

.attr("id", function(d) {
  return d3.select(this.parentNode).datum().id;
})

Great and thanks for your help on the way of learning