d3.js - SVG コンテナ上のこれらの要素にマウスオーバーしたときにカーソルを手の形に設定するにはどうすればよいですか? 質問する

d3.js を使用して、SVG コンテナー上にいくつかの円を描画しました。

これらの円のマウスオーバー動作を設定して、簡単なコンソール メッセージを印刷することに成功しました。マウスオーバー (およびマウスアウト) すると、これらのコンソール メッセージが表示されるので、正しく動作していることがわかります。

ただし、そのコンソール メッセージを印刷する代わりに、マウスオーバーしたときにカーソルを手の形に変更し、マウスアウトしたときにカーソルを通常の矢印に戻したいと思います。以下のコードでは、どうすればよいでしょうか。

マウスオーバー時にスタイル プロパティをcursorに変更しpointer、マウスアウト時にスタイル プロパティを に変更する必要があることはわかっています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?
            }
          }
        );