d3 v4 info-bulle transmettant des données d issue

Question

J'essaie d'afficher du texte au survol de la souris sur un axe x. Ce stackoverflow post y arrive presque, sauf que je suis incapable de transmettre des données à la fonction appelée au passage de la souris.

// Add the X Axis 
    svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x)) 
    .selectAll("text") 
    .style("text-anchor", "end") 
    .style("font", "7px times") 
    .attr("dx", "-.8em") 
    .attr("dy", ".15em") 
    .attr("transform", "rotate(-65)") 
    .on("mouseover", function(d) { 
     return tooltip.style("visibility", "visible") 
    }) 
    .on("mouseout", function(d) { 
     return tooltip.style("visibility", "hidden"); 
    }); 

    var tooltip = d3.select("#info") 
    .append("div") 
    .style("position", "absolute") 
    .style("z-index", "10") 
    // .style("visibility", "hidden") 
    .text("a simple tooltip" + d.name); 

Lorsque je supprime d.name cela fonctionne. Je suis incapable de passer d à l'infobulle. Peut-être que j'ai besoin d'utiliser .data (data) .enter() que j'ai essayé mais peut-être que je ne l'utilise pas correctement.

Merci,

https://d3js.org/d3.v4.min.js est la seule bibliothèque que je utilise.

Answer 1

Pouvez-vous simplement définir le texte dans le rappel de la souris, où vous avez accès à d?

// Add the X Axis 
svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x)) 
    .selectAll("text") 
    .style("text-anchor", "end") 
    .style("font", "7px times") 
    .attr("dx", "-.8em") 
    .attr("dy", ".15em") 
    .attr("transform", "rotate(-65)") 
    .on("mouseover", function(d) { 
     return tooltip 
      .style("visibility", "visible") 
      .text("a simple tooltip" + d.name); 
    }) 
    .on("mouseout", function(d) { 
     return tooltip.style("visibility", "hidden"); 
    }); 

var tooltip = d3.select("#info") 
    .append("div") 
    .style("position", "absolute") 
    .style("z-index", "10") 
    // .style("visibility", "hidden") 
    // .text("a simple tooltip" + d.name);