D3.js: Поместите всплывающие подсказки, используя положение элемента, а не положение мыши?

Я использую D3 для рисования графа рассеяния. Я хотел бы показывать подсказки, когда пользователь мыши над каждым кругом.

Моя проблема заключается в том, что я могу добавлять всплывающие подсказки, но они позиционируются с использованием событий мыши d3.event.pageX и d3.event.pageY, поэтому они не располагаются последовательно над каждым кругом.

Вместо этого некоторые немного слева от круга, некоторые справа - это зависит от того, как пользовательская мышь входит в круг.

Это мой код:

circles
  .on("mouseover", function(d) {         
    tooltip.html(d)  
      .style("left", (d3.event.pageX) + "px")     
      .style("top", (d3.event.pageY - 28) + "px");    
  })                  
  .on("mouseout", function(d) {       
    tooltip.transition().duration(500).style("opacity", 0);   
  });

И это JSFiddle, показывающая проблему: http://jsfiddle.net/WLYUY/5/

Можно ли каким-либо образом использовать центр самого круга в качестве положения для ориентации всплывающей подсказки, а не положения мыши?

Ответ 1

В вашем конкретном случае вы можете просто использовать d для размещения всплывающей подсказки, т.е.

tooltip.html(d)  
  .style("left", d + "px")     
  .style("top", d + "px");

Чтобы сделать это немного более общим, вы можете выбрать элемент, который затушевывается, и получить его координаты для размещения всплывающей подсказки, т.е.

tooltip.html(d)  
  .style("left", d3.select(this).attr("cx") + "px")     
  .style("top", d3.select(this).attr("cy") + "px");

Ответ 2

Найденное здесь, которое могло бы решить вашу проблему, даже если <body> и <svg> имеют другое расположение. Предполагается, что у вас есть absolute позиция для вашей подсказки.

.on("mouseover", function(d) {
    var matrix = this.getScreenCTM()
        .translate(+ this.getAttribute("cx"), + this.getAttribute("cy"));
    tooltip.html(d)
        .style("left", (window.pageXOffset + matrix.e + 15) + "px")
        .style("top", (window.pageYOffset + matrix.f - 30) + "px");
})

Ответ 3

Я новичок в D3, поэтому это может не сработать для диаграмм рассеяния... но оказалось, что это работает для гистограмм... где v1 и v2 - значения, которые будут построены.. и, похоже, он ищет ценность из массива данных.

.on("mouseover", function(d) {
                  divt .transition()
                      .duration(200)
                      .style("opacity", .9);
                  divt .html(d.v1)
                      .style("left", x(d.v2)+50 + "px")
                      .style("top",y(d.v1)+ "px");})