#javascript #d3.js #svg
#javascript #d3.js #svg
Вопрос:
У меня есть кнопка, представляющая собой прямоугольник с текстом и невидимый прямоугольник сверху. Невидимый прямоугольник помогает убедиться, что пользователь может щелкнуть в любом месте кнопки, в том числе над словом PLAY
.
Невидимый прямоугольник мешает моему .on("mouseover")
эффекту работать, который изменяет цвет кнопки.
Это мой код —
// 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")
} })
Я бы хотел, чтобы пользователь мог навести курсор в любом месте, но также мог менять цвет при наведении курсора мыши.
Ответ №1:
Вы перегибаетесь назад, вам не нужен этот невидимый прямоугольник. Просто установите для текста pointer-events
значение none
и добавьте прослушиватель событий в видимый прямоугольник.
Вот ваш код с этим изменением:
// 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:
Я думаю, что самым простым способом было бы создать функцию наведения, запускаемую невидимой кнопкой (вы должны добавить идентификаторы), например :
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")
} })