반 도넛 또는 하프 파이 차트 용 도구 팁

Question

스택에이 링크가 있습니다. 하프 파이/반 도넛 차트에 툴팁을 추가 할 수 있습니까? http://tributary.io/inlet/5260888

Answer 1

다음은 차트에 div 툴팁을 추가하는 예입니다.

// create div add to DOM 
var div = d3.select("body").append("div") 
    .style("position", "absolute") 
    .style("width", "60px") 
    .style("height", "18px") 
    .style("background", "lightsteelblue") 
    .style("border-radius","4px") 
    .style("opacity", 0); 

..... 

// after you append the "arcs" 
// set up some mouse handler to show/hide div 
arcs.append("svg:path") 
      .attr("fill", function(d, i) { return color(i); }) 
      .attr("d", arc) 

    .on("mousemove", function(d) { 
     div.transition()   
      .duration(200)  
      .style("opacity", 0.9);  
     div.html("Seats: " + d.value) 
      .style("left", (d3.event.pageX) + "px")  
      .style("top", (d3.event.pageY - 28) + "px");  
     })     
    .on("mouseout", function(d) {  
     div.transition()   
      .duration(500)  
      .style("opacity", 0); 
    }); 

예 : here을 참조하십시오.