Hiển thị dữ liệu khi di chuột qua vòng tròn

Tôi có một bộ dữ liệu mà tôi đang vẽ trong một phân tán. Khi tôi di chuột qua một trong các vòng tròn, tôi muốn nó xuất hiện với dữ liệu (như các giá trị x, y, có thể nhiều hơn). Đây là những gì tôi đã thử sử dụng:

vis.selectAll("circle")
   .data(datafiltered).enter().append("svg:circle")
   .attr("cx", function(d) { return x(d.x);})
   .attr("cy", function(d) {return y(d.y)})
   .attr("fill", "red").attr("r", 15)
   .on("mouseover", function() {
        d3.select(this).enter().append("text")
            .text(function(d) {return d.x;})
            .attr("x", function(d) {return x(d.x);})
            .attr("y", function (d) {return y(d.y);}); });

Tôi nghi ngờ tôi cần có nhiều thông tin hơn về những dữ liệu cần nhập?

Tôi giả định rằng những gì bạn muốn là một tooltip. Cách dễ nhất để làm điều này là nối một svg:titlephần tử vào mỗi vòng tròn, vì trình duyệt sẽ đảm nhiệm việc hiển thị chú giải công cụ và bạn không cần sử dụng mousehandler. Mã sẽ giống như

vis.selectAll("circle")
   .data(datafiltered).enter().append("svg:circle")
   ...
   .append("svg:title")
   .text(function(d) { return d.x; });

Nếu bạn muốn chú giải công cụ fancier, bạn có thể sử dụng mẹo chẳng hạn. Xem ở đây cho một ví dụ.

Một cách thực sự tốt để tạo ra một chú giải công cụ được mô tả ở đây: Ví dụ về chú giải công cụ D3 đơn giản

Bạn phải nối thêm một div

var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

Sau đó, bạn có thể chuyển đổi nó bằng cách sử dụng

.on("mouseover", function(){return tooltip.style("visibility", "visible");})
.on("mousemove", function(){return tooltip.style("top",
    (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});

d3.event.pageX / d3.event.pageY là tọa độ chuột hiện tại.

Nếu bạn muốn thay đổi văn bản, bạn có thể sử dụng tooltip.text("my tooltip text");

Ví dụ làm việc

Có một thư viện tuyệt vời để làm điều đó mà tôi mới phát hiện ra. Cách sử dụng đơn giản và kết quả khá gọn gàng: d3-tip.

Bạn có thể xem một ví dụ ở đây :

Về cơ bản, tất cả những gì bạn phải làm là tải xuống ( index.js ), bao gồm tập lệnh:

<script src="index.js"></script>

và sau đó làm theo các hướng dẫn từ đây (cùng liên kết với ví dụ)

Nhưng đối với mã của bạn, nó sẽ là một cái gì đó như:

định nghĩa phương thức:

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
  })

tạo svg của bạn (như bạn đã làm)

var svg = ...

gọi phương thức:

svg.call(tip);

thêm mẹo vào đối tượng của bạn:

vis.selectAll("circle")
   .data(datafiltered).enter().append("svg:circle")
...
   .on('mouseover', tip.show)
   .on('mouseout', tip.hide)

Đừng quên thêm CSS:

<style>
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
</style>

Bạn có thể truyền dữ liệu sẽ được sử dụng trong quá trình di chuột như thế này - sự kiện rê chuột sử dụng một hàm với enterdữ liệu ed trước đó của bạn làm đối số (và chỉ mục làm đối số thứ hai) vì vậy bạn không cần phải sử dụng enter()lần thứ hai.

vis.selectAll("circle")
.data(datafiltered).enter().append("svg:circle")
.attr("cx", function(d) { return x(d.x);})
.attr("cy", function(d) {return y(d.y)})
.attr("fill", "red").attr("r", 15)
.on("mouseover", function(d,i) {
    d3.select(this).append("text")
        .text( d.x)
        .attr("x", x(d.x))
        .attr("y", y(d.y)); 
});

Ví dụ ngắn gọn này cho thấy cách phổ biến để tạo tooltip tùy chỉnh trong d3.

var w = 500;
var h = 150;

var dataset = [5, 10, 15, 20, 25];

// firstly we create div element that we can use as
// tooltip container, it have absolute position and
// visibility: hidden by default

var tooltip = d3.select("body")
  .append("div")
  .attr('class', 'tooltip');

var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

// here we add some circles on the page

var circles = svg.selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle");

circles.attr("cx", function(d, i) {
    return (i * 50) + 25;
  })
  .attr("cy", h / 2)
  .attr("r", function(d) {
    return d;
  })
  
  // we define "mouseover" handler, here we change tooltip
  // visibility to "visible" and add appropriate test
  
  .on("mouseover", function(d) {
    return tooltip.style("visibility", "visible").text('radius = ' + d);
  })
  
  // we move tooltip during of "mousemove"
  
  .on("mousemove", function() {
    return tooltip.style("top", (event.pageY - 30) + "px")
      .style("left", event.pageX + "px");
  })
  
  // we hide our tooltip on "mouseout"
  
  .on("mouseout", function() {
    return tooltip.style("visibility", "hidden");
  });

.tooltip {
    position: absolute;
    z-index: 10;
    visibility: hidden;
    background-color: lightblue;
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    font-weight: bold;
    color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>