d3.js - Làm thế nào tôi có thể đặt con trỏ để tay khi di chuột qua các thành phần này trên vùng chứa SVG?

Question

Tôi đã sử dụng d3.js để vẽ một số vòng tròn trên vùng chứa SVG.

Tôi đã thiết lập thành công hành vi di chuột qua các vòng kết nối này để in các tin nhắn bảng điều khiển đơn giản. Tôi thấy các thông báo trên bảng điều khiển đó khi tôi di chuột qua (và di chuột qua) để tôi biết chúng đang hoạt động đúng cách.

Tuy nhiên, thay vì in các bảng điều khiển đó, tôi muốn thay đổi con trỏ sang tay khi tôi di chuyển chúng và tôi muốn thay đổi con trỏ về mũi tên thông thường khi tôi di chuyển chuột ra ngoài. Với mã của tôi dưới đây, làm thế nào tôi có thể làm điều đó?

Khi di chuột qua, tôi biết tôi cần thay đổi thuộc tính kiểu cursor thành pointer và khi di chuột, tôi biết mình cần thay đổi thành default nhưng tôi không biết cú pháp về cách thực hiện. Ai đó có thể giải thích cho tôi không? Dưới đây là mã của tôi.

 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? 
      } 
      } 
     ); 

Answer 1

Bạn có thể làm điều đó như thế này:

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

làm việc mã here

Answer 2

Bạn chỉ cần cố gắng này:

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"); 

Bởi vì khi bạn xác định con trỏ như một con trỏ cho đối tượng của bạn, khi bạn "di chuyển chuột", thì con trỏ sẽ trở thành con trỏ.

Xem tại đây ví dụ: https://jsfiddle.net/oj5vubxn/2/

Answer 3

Tại sao bạn không đơn giản để CSS xử lý?

.dots { 
    cursor: pointer; 
} 

Answer 4

Đặt kiểu động trong trường hợp này không có ý nghĩa gì. Nếu chuột vượt quá phần tử, kiểu con trỏ sẽ được áp dụng. Nếu không, bạn đang di chuột qua phần tử khác và kiểu con trỏ cho phần tử đó được áp dụng. Vì vậy, không có lý do nào để đặt kiểu động dựa trên các sự kiện di chuột qua. Bạn cũng có thể chỉ thiết lập kiểu khi khởi tạo.

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

Hoặc chỉ cần đặt kiểu trong tệp CSS làm câu trả lời khác được chỉ ra.