확대/축소 원 그래프에 툴팁을 표시하는 방법

Question

줌 가능한 원 포장에 툴팁 표시를 시도했습니다. 나는 그것을 onMouseover로 표시 할 필요가 있으며 경고를받을 수는 있지만 도구 설명 형식은 아닙니다.

누군가가 나를 도울 수 있습니까?

감사합니다.

Answer 1

아래를 참조하십시오. 희망이 당신을 도와줍니다. 우리는 (높은 Z- 인덱스를 사용하여 기본적으로 숨겨져 및 페이지의 "위"모든 요소를 ​​위치 단지 사업부 우리의 툴팁 자체를 만드는 곳

var data = [4, 8, 15, 16, 23, 42]; 

var x = d3.scale.linear() 
.domain([0, d3.max(data)]) 
.range([0, 420]); 

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

d3.select("body") 
.selectAll("div") 
.data(data) 
.enter().append("div") 
.style("width", function(d) { return x(d) + "px"; }) 
.text(function(d) { return d; }) 
.on("mouseover", function(d){tooltip.text(d); 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");}); 

var에 툴팁 = 블록이다 값).

일단 만들어지면 적절한 이벤트와 해당 이벤트가 발생할 때 발생하는 함수를 허용하는 수많은 .on 메서드 호출을 사용하여 d3.js의 막 대형 차트 작성 코드에 추가했습니다. 가장 중요한 것은 tooltip.text (d)를 지정하는 첫 번째 mouseover 이벤트 함수에 있습니다. 툴팁의 텍스트가 전달 된 데이터 값 d로 설정됨을 의미합니다.

여기에 전달 된 데이터로 사용자 정의 가능한 div 툴팁이 표시됩니다.