J'ai un bouton qui est un rectangle et du texte et un rectangle invisible sur le dessus. Le rectangle invisible permet de s'assurer qu'un utilisateur peut cliquer n'importe où sur le bouton, y compris sur le mot PLAY.

Le rectangle invisible empêche mon effet .on("mouseover") de fonctionner, ce qui modifie la couleur du bouton.

Ceci est mon code -

// svg element
var ticker = d3.select("#ticker").select("svg")
    .attr("width", 300)
    .attr("height", 50);

// group for button elements
ticker = d3.select("#ticker").select("svg")
    .attr("class", "ticker")
    .attr("transform", "translate(0,0)")
    .append("g")

// button with color
ticker.append("rect")
    .attr("class", "pauseplay")
    .attr("x", "120")
    .attr("y", "0")
    .attr("height","30")
    .attr("width","100")
    .attr("rx","5")
    .style("fill","#FF5960")
    .on("mouseover", function() { d3.select(this).style("fill", "#ff7b7b"); })
    .on("mouseout", function() { d3.select(this).style("fill", "#FF5960"); })

  // button text
  ticker.append("text")
    .attr("class","btn-text")
    .attr("x","150")
    .attr("y","20")
    .text("PAUSE")
    .style("fill","white")

  // invisible button
  ticker.append("rect")
  .attr("class","play")
  .attr("x", "120")
  .attr("y", "0")
  .attr("height","30")
  .attr("width","100")
  .style("opacity","0")
  .on("click", function() {
    PAUSED = !PAUSED;
      t.stop();
      // Play it.
      if (!PAUSED) {
        ticker.selectAll(".btn-text").text("PAUSE")
        timer();    }
      // Pause it.
      else {
        ticker.selectAll(".btn-text").text("PLAY")
      }     })

J'aimerais que l'utilisateur puisse survoler n'importe où, mais aussi que la couleur change au passage de la souris.

1
Cauder 18 mars 2019 à 12:42

2 réponses

Meilleure réponse

Vous vous penchez en arrière, vous n'avez pas besoin de ce rectangle invisible. Définissez simplement le pointer-events du texte sur none et ajoutez l'écouteur d'événement au rectangle visible.

Voici votre code avec ce changement:

// svg element
var ticker = d3.select("#ticker").select("svg")
  .attr("width", 300)
  .attr("height", 50);

// group for button elements
ticker = d3.select("#ticker").select("svg")
  .attr("class", "ticker")
  .attr("transform", "translate(0,0)")
  .append("g")

// button with color
ticker.append("rect")
  .attr("class", "pauseplay")
  .attr("x", "120")
  .attr("y", "0")
  .attr("height", "30")
  .attr("width", "100")
  .attr("rx", "5")
  .style("fill", "#FF5960")
  .on("mouseover", function() {
    d3.select(this).style("fill", "#ff7b7b");
  })
  .on("mouseout", function() {
    d3.select(this).style("fill", "#FF5960");
  })
  .on("click", function() {
    console.log("click")
  })

// button text
ticker.append("text")
  .attr("class", "btn-text")
  .attr("x", "150")
  .attr("y", "20")
  .text("PAUSE")
  .style("fill", "white")
  .attr("pointer-events", "none");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="ticker">
  <svg></svg>
</div>
2
Gerardo Furtado 18 mars 2019 à 09:49

Je pense que le moyen le plus simple serait de créer une fonction de survol déclenchée par le bouton invisible (il faut ajouter des identifiants) comme par exemple :

ticker.append("rect")
.attr("class", "pauseplay")
.attr("id","myID")
.attr("x", "120")
.attr("y", "0")
.attr("height","30")
.attr("width","100")
.attr("rx","5")
.style("fill","#FF5960")
.on("mouseout", function() { d3.select(this).style("fill", "#FF5960"); })

 // invisible button
ticker.append("rect")
.attr("class","play")
.attr("x", "120")
.attr("y", "0")
.attr("height","30")
.attr("width","100")
.style("opacity","0")
.on("mouseover", function() { d3.select("#myID").style("fill", "#ff7b7b"); })
.on("click", function() {
PAUSED = !PAUSED;
  t.stop();
  // Play it.
  if (!PAUSED) {
    ticker.selectAll(".btn-text").text("PAUSE")
    timer();    }
  // Pause it.
  else {
    ticker.selectAll(".btn-text").text("PLAY")
  }     })
1
abvlle 18 mars 2019 à 09:52