Find the value of a circle with d3js

Tetsuochat · November 1, 2022, 8:07pm

Hello i am new user of D3js and use version 7, i have a problem to find the value of a circle pointed by the mouse.

I have find it with the following code :

.on("mousemove", (event, d) => {console.log("x10", d); )//WORKING}

inside this code :

d3.selectAll('circle')
  .on('mouseover', function(e, d) {
    d3.select(this)
	//.on("mousemove", (event, d) => {const x10 = console.log(event.currentTarget)+console.log("x10", d.measurement); })//WORKING
	.on("mousemove", (event, d) => {console.log("x10", d); })//WORKING
    //.console.log("A",x10) 
	.style('fill', 'red');
	  
  })

and so i can get the information (the value 60.49) i need on the console :

{
    "date": "2022-10-25T21:00:00.000Z",
    "measurement": 60.49
}

but i would like to get the returned value in a var or const, so i have tried this :

.on("mousemove", (event, d) => {var A = console.log("x10", d); })//NOT WORKING`

So if someone of you can help me.Thx

annie · November 2, 2022, 2:42pm

hi there! it looks like you are setting the value of var A to the return value of console.log("x10", d). console.log prints out the value passed to it, but will return undefined.

i would try directly setting var A to equal d, which is the value you want:

.on("mousemove", (event, d) => {var A = d; })

Tetsuochat · November 2, 2022, 4:07pm

Hi thanks, but i have 2 questions, is this syntaxe up to date with version 7 ?
and how can i add it to my existing code as below ? I have a lot of problem to understand how this is working and i spend many days to get this workin and i am close to the end.

//----------------------------Rectangle TOOLTIP-----------------------------//
//Trace un rectangle CSS overlay transparent pour le pointeur souris
svg.append("rect")
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height)
    .on("mouseover", function(event) { 
        tooltip.style("display", null);
    })
    .on("mouseout", function(event) {
        tooltip.style("display", "none");
    })
    .on("mousemove", mousemove);
	
     function mousemove(event) {
        const x0 = xScale.invert(d3.pointer(event)[0])
		.on("mousemove", (event, d) => {var A = d; })
		//var formatDate = d3.timeFormat("%Y%m%d") //Convertie la valeur x0 en format Y%m%d
		var formatDate = d3.timeFormat("%Y-%m-%d %H:%M:%S") //Convertie la valeur x0 en format Y%m%d
		var formatY = d3.timeFormat ("%Y")
		var formatM = d3.timeFormat ("%m")
		var formatJ = d3.timeFormat ("%d")
		var formatH = d3.timeFormat ("%H")
		var formatm = d3.timeFormat ("%M")
		var formatS = d3.timeFormat ("%S")
		w=formatDate(x0);//
        i = bisectDate(data, w); //Appel la var bisectDate
        d = data[i];
		//console.log("data",data);
	console.log("x0",x0);//Affiche la date sous la forme "2022-10-24T05:30:57.011Z" Mon Oct 24 2022 07:30:57 GMT+0200 (heure d’été d’Europe centrale)
	console.log("w",w);//Affiche la date sous la forme 2022-10-24 07:30:57
    console.log("i",i);//Pointeur de l'array
	console.log("d",d);//Affiche les valeurs de l'array correspondant à la position du pointeur
	console.log("d.date",d.date);//Affiche la date et l'heure formatée %Y-%m-%d %I:%M:%S
	Y= formatY(x0);//Année
	M= formatM(x0);//Mois
	J= formatJ (x0);//Jours
	H= formatH (x0);// Heure
	m= formatm (x0);//Minutes
	S= formatS (x0);//Secondes
	T=('2022-10-25 09:30:00');
	console.log("T",T);
	 
    //tooltip.attr("transform", "translate( "+x1(d.date)+" ," + yScale(d.A) + ")"); //ICI ca Bloque !!!!!! Voir fonction XScale
	//tooltip.attr("transform", "translate( 425 , " + yScale(d.A) + " )"); //ICI ca Bloque !!!!!! Voir fonction XScale
	tooltip.attr("transform", "translate( "+xScale(new Date(Y,M-1,J,H,m,S))+" , " + yScale(d.A) + " )"); //Sert a positionner le Tool Type
	//JavaScript counts months from 0 to 11. January is 0. December is 11.
	console.log ("xScale",xScale(d.date));
	console.log("y",yScale(d.A)); //Retourne position sur axe y
	console.log("Y",Y);//Retourne l'année à la position du pointeur
	console.log("M",M);//Retourne le mois à la position du pointeur
	console.log("J",J);//Retourne le jour à la position du pointeur
	console.log("x2",xScale(20221025));
	console.log ("x1",xScale(new Date(2022-10-24))); //Fonctionne il faut mettre en forme la date.
	console.log ("x1",xScale(new Date(Y,M,J))); //Fonctionne il faut mettre en forme la date.
	//console.log ("x1",x1(new Date(Y,M,J)));
    //console.log("y1",y1(0)); 
    d3.select('#tooltip-date')
        .text(d.date);
    d3.select('#tooltip-close')
	.text(d.A+"°C"+"br/"+d.B+"°C"+" "+d.C+"°C");
	
	
}	

});

Tetsuochat · November 2, 2022, 4:38pm

Hi thanks i have tried it but this is an obsolete syntaxe, this is why i have mentionned that i use version 7.
It seems that this is not used since version 6.
I have posted other reply but was catch by spam system of the Observable and i don’t know when will be released

Tetsuochat · November 2, 2022, 4:59pm

I get an answer from a friend but i still have problems, I have a graphe with dots, and actually when i put the mouse over a dot, this one is going red as expected , but i didn’t succed to get it back as the original color blue. All dot that i go over stays in red. And i get the following console error each time i go out of one circle:
Capture d’écran 02-11-2022 16.57.39


<!-- Add a svg area, empty -->
<div id="scatter_area"></div>

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v7.js"></script>
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 40, bottom: 30, left: 30},
    width = 450 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svG = d3.select("#scatter_area")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Create data
var data = [ {x:10, y:20}, {x:40, y:90}, {x:80, y:50} ]

// X scale and Axis
var x = d3.scaleLinear()
    .domain([0, 100])         // This is the min and the max of the data: 0 to 100 if percentages
    .range([0, width]);       // This is the corresponding value I want in Pixel
svG
  .append('g')
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

// X scale and Axis
var y = d3.scaleLinear()
    .domain([0, 100])         // This is the min and the max of the data: 0 to 100 if percentages
    .range([height, 0]);       // This is the corresponding value I want in Pixel
svG
  .append('g')
  .call(d3.axisLeft(y));
function logMeasurement(event, d){
    var a = d.measurement
	const x0 = d.date	
    console.log("Température point :",a)
	console.log("Date",x0)
	var formatDate = d3.timeFormat("%Y-%m-%d %H:%M:%S") //Convertie la valeur x0 au format souhaité Y%m%d
	var w=formatDate(x0)
	console.log("w",w)
	var bisectDate = d3.bisector(d => d.date).right
	i = bisectDate(data, w) //Appel la var bisectDate
	console.log("i",i)//Pointeur de l'array
	//console.log("Recherche",slices[0].values[i-1]);
	
	
}
// Add 3 dots for 0, 50 and 100%
svG
  .selectAll("whatever")
  .data(data)
  .enter()
  .append("circle")
    .attr("cx", function(d){ return x(d.x) })
    .attr("cy", function(d){ return y(d.y) })
    .attr("r", 7)
d3.selectAll('circle')
	.style("fill", "blue")
	.attr("class","point")
	.style("opacity", 1)
	
    .on("mouseover", function(event) {
		style("fill", "blue")
		style("opacity", 0)
		style("display", null);
    })

    .on("mouseout", function(event) {
		style("display", "none")
		style("opacity", 0)
		style("fill", "blue");
    })

	.on('mouseover', function(e, d) {	 
		//d3.selectAll('circle')
			d3.select(this)
			.on("mousemove", (event, d) => logMeasurement(event, d))
			.style("fill", "red");
			//.style("opacity", 0);
	})
</script>

annie · November 2, 2022, 7:08pm

you’re getting the style is not defined error because you need to call .style() on the element that you want to modify. in your code, try replacing everything starting from d3.selectAll('circle') with the following:

  d3.selectAll("circle")
    .style("fill", "blue")
    .attr("class", "point")
    .style("opacity", 1)

    .on("mouseout", function (event) {
      d3.select(this).style("fill", "blue");
    })

    .on("mouseover", function (e, d) {
      d3.select(this)
        .on("mousemove", (event, d) => logMeasurement(event, d))
        .style("fill", "red");
    });

that worked for me when testing in a notebook. i removed the duplicate mouseover function, and replaced the call to style with d3.select(this).style.

Tetsuochat · November 2, 2022, 7:49pm

Wonderful you get me out of this problem, i was running around for days. Thanks a lot, grettings from France

annie · November 2, 2022, 8:11pm

glad to be of help!! greetings from New York

Topic		Replies	Views
Maintain force simulation on mouseover change Community Help	7	472	September 6, 2022
D3 .on click - where is it coming from? Community Help	3	577	January 15, 2021
Trouble with New To Observable	1	333	May 24, 2022
How to update observable.value from within a callback? Community Help	4	2500	February 14, 2018
d3-drag and d3-zoom - Mystery Bug Community Help	3	896	February 6, 2020

Find the value of a circle with d3js

Related topics