D3.js - Как я могу установить курсор в ручную при наведении этих элементов в контейнер SVG?
Я использовал d3.js для рисования некоторых кругов в контейнере SVG.
Я успешно установил поведение мыши в этих кругах для печати простых консольных сообщений. Я вижу эти консольные сообщения, когда я наводил курсор мыши (и мышь), поэтому я знаю, что они работают правильно.
Однако вместо того, чтобы печатать эти сообщения консоли, я хочу поменять курсор на руку, когда я навешиваю на них курсор, и я хочу поменять курсор на обычную стрелку, когда я выхожу. Учитывая мой код ниже, как я могу это сделать?
При наведении мыши я знаю, что мне нужно изменить свойство стиля cursor
на pointer
и на mouseout, я знаю, что мне нужно изменить его на default
, но я не знаю синтаксиса того, как я должен это делать Это. Может кто-нибудь, пожалуйста, объясните мне это? Ниже мой код.
var myCircle = svgContainer.selectAll(".dots")
.data(myDataList).enter().append("circle")
.attr("class", "dots")
.attr("cx", function(d, i) {return d.centerX})
.attr("cy", function(d, i) {return d.centerY})
.attr("r", 5)
.attr("stroke-width", 0)
.attr("fill", function(d, i) {return "red"})
.style("display", "block");
myCircle.on({
"mouseover": function(d) {
console.log('Hello World!'); // What do I change this to?
},
"mouseout": function(d) {
console.log('Goodbye World!'); // What do I change this to?
}
}
);
Ответы
Ответ 1
Вы можете сделать это следующим образом:
myCircle.on({
"mouseover": function(d) {
d3.select(this).style("cursor", "pointer");
},
"mouseout": function(d) {
d3.select(this).style("cursor", "default");
}
});
рабочий код здесь
Ответ 2
Почему бы вам просто не разрешить CSS?
.dots {
cursor: pointer;
}
Ответ 3
Вы просто попробовали это:
var myCircle = svgContainer.selectAll(".dots")
.data(myDataList).enter().append("circle")
.attr("class", "dots")
.attr("cx", function(d, i) {return d.centerX})
.attr("cy", function(d, i) {return d.centerY})
.attr("r", 5)
.attr("stroke-width", 0)
.attr("fill", function(d, i) {return "red"})
.style("display", "block")
.style("cursor", "pointer");
Потому что, когда вы определяете курсор как указатель на свой объект, когда вы "наводите указатель мыши", указатель становится указателем.
См. здесь пример: https://jsfiddle.net/oj5vubxn/2/
Ответ 4
Настройка стиля динамически в этом случае не имеет никакого смысла. Если мышь над элементом, применяется стиль курсора. В противном случае вы находитесь над другим элементом и применяется стиль курсора для этого элемента. Поэтому нет причин устанавливать стиль динамически на основе событий mouseover. Вы можете просто установить стиль при инициализации.
myCircle.style("cursor", "pointer");
Или просто установите стиль в файле CSS, как указано в другом ответе.