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, как указано в другом ответе.