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

CodePudding user response：

If this part is working:

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

then you could use it to call your own function instead of console.log

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

function logMeasurement(event, d){
    var a = d.measurement 
    console.log(a)
}

CodePudding user response：

So i have tried to implement it but it's blocking, i think because i had two time an event mousmove. This two days that i spend on this so i post the code if you can just help me to find the right syntaxe to make it works.

lines.selectAll("points")
    .attr("class", "point")
    .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", 4)
    .attr("class","point")
    .style("opacity", 1)

    
    .on("mouseover", function(event) { 
        tooltip.style("display", null);
    })
    .on("mouseout", function(event) {
        tooltip.style("display", "none");
    })
    .on("mousemove", mousemove);//Appel la fonction mousemove
     function mousemove(event) {
        const x0 = xScale.invert(d3.pointer(event)[0]) //Retourne la position de la souris sur axe x
        const y0 = yScale.invert(d3.pointer(event)[1]) //Retourne la position de la souris sur l'echelle y
        var bisectDate = d3.bisector(d => d.date).right;//Fonction qui permet de trouver l'id la plus proche du pointeur souris
        
        var formatDate = d3.timeFormat("%Y-%m-%d %H:%M:%S") //Convertie la valeur x0 au format souhaité Y%m%d
        
        w=formatDate(x0);//
        i = bisectDate(data, w); //Appel la var bisectDate
        d = data[i];//Récupere toute les valeurs correspondente à la position i
        
        
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
    .on("mousemove", (event, d) => logMeasurement(event, d))
    //.console.log("A",x10) 
    .style('fill', 'red');
      
  })


function logMeasurement(event, d){
    var a = d.measurement 
    //console.log("TEST",a)
} 


tooltip.attr("transform", "translate( " xScale(new Date(d.date)) " , "   yScale(d.Extérieur)   " )"); //Sert a positionner le Tool Type
    Test= d.Extérieur;
    d3.select('#tooltip-date')
        .text(d.date);
    d3.select('#tooltip-close') //Voir si possible d'ajouter tooltip-close &,é,",etc....
    .text(d.Extérieur "°C");//N'accepte pas le nom avec les espaces.....
    d3.select('#tooltip-close1') //Voir si possible d'ajouter tooltip-close &,é,",etc....
    .text(d.DépartPAC "°C");//N'accepte pas le nom avec les espaces.....    
    d3.select('#tooltip-close2') //Voir si possible d'ajouter tooltip-close &,é,",etc....
    .text(d.RetourPAC "°C");//N'accepte pas le nom avec les espaces.....    
}
//Juste pour modifier la couleur des cercles si on click dessus 
d3.selectAll('circle')
  .on('click', function(e, d) {
    d3.select(this)
    .on("click", (event, d) => { console.log(event.currentTarget); })//WORKING
      .style('fill', 'orange');
      
  });