web-dev-qa-db-ja.com

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?
            }
          }
        );
javascriptcssd3.jssvgmouseover
14
Saqib Ali

次のようにできます：

myCircle.on({
      "mouseover": function(d) {
        d3.select(this).style("cursor", "pointer"); 
      },
      "mouseout": function(d) {
        d3.select(this).style("cursor", "default"); 
      }
    });

作業コード ここ

21
Cyril Cherian

CSSで単純に処理してみませんか？

.dots {
  cursor: pointer;
}
20
Gerardo Furtado

これを試してみましたか：

    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/

9
Gremi64

この場合、スタイルを動的に設定しても意味がありません。マウスが要素上にある場合、カーソルスタイルが適用されます。それ以外の場合は、別の要素にカーソルを合わせると、その要素のカーソルスタイルが適用されます。したがって、マウスオーバーイベントに基づいてスタイルを動的に設定する理由はありません。初期化時にスタイルを設定することもできます。

myCircle.style("cursor", "pointer");

または、別の回答が示すようにCSSファイルでスタイルを設定するだけです。

5
Doughy