D3에 누적 막대 그래프에 제목을 추가 할 수 없습니다

Question

이 example을 사용하여 누적 막 대형 차트를 만듭니다. 차트가 작동하고 렌더링되지만 마우스 오버 레이블을 추가 할 수 없습니다.

I이 시도

...

DATE.selectAll("rect") 
    .data(function(d) { return d.ages; }) 
    .enter().append("rect") 
    .attr("width", x.rangeBand()) 
    .attr("y", function(d) { return y(d.y1); }) 
    .attr("height", function(d) { return y(d.y0) - y(d.y1); }) 
    .style("fill", function(d) { return color(d.name); }); 
    .append("svg:title") 
    .text(functino(d){return "foo"}); 

하지만 이것을 .append("svg:title...를 추가 한 후, 그래프는 렌더링을 중지. .style("fill... 행을 제거하면 그래프가 렌더링되지만 누적되지 않으며 마우스 오버 기능이 없습니다.

툴팁 경로를 사용해 보았습니다. (Source)

.on("mouseover", function() { tooltip.style("display", null); }) 
    .on("mouseout", function() { tooltip.style("display", "none"); }) 
    .on("mousemove", function(d) { 
    var xPosition = d3.mouse(this)[0] - 15; 
    var yPosition = d3.mouse(this)[1] - 25; 
    tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")"); 
tooltip.select("text").text(d.y); 
}); 


// Prep the tooltip bits, initial display is hidden 
var tooltip = svg.append("g") 
.attr("class", "tooltip") 
.style("display", "none"); 

tooltip.append("rect") 
.attr("width", 30) 
.attr("height", 20) 
.attr("fill", "white") 
.style("opacity", 0.5); 

tooltip.append("text") 
.attr("x", 15) 
.attr("dy", "1.2em") 
.style("text-anchor", "middle") 
.attr("font-size", "12px") 
.attr("font-weight", "bold"); 

그러나 아직도 빕니다. 로드해야하는 라이브러리가 있습니까? 무슨 일이 일어나고 있는지 잘 모르겠다.

Answer 1

title을 입력하려고하면 그래프가 멈추는 경우가 있습니다.이 경우 function이 아니라 functino입니다. 게다가

, 이것은 각 누적 막대의 값을 얻을 필요가 무엇 : 여기

.append("title") 
.text(function(d){ 
    return d[1]-d[0] 
}); 

데모입니다 : https://bl.ocks.org/anonymous/raw/886d1749c4e01e191b94df23d97dcaf7/

하지만 <title>들 좋아하지 않는다. 그들은 다재다능하지 못합니다. 따라서, 대신 연결된 두 번째 코드처럼, 나는 사업부 만드는 선호하는 또 다른 <text>을 만드는 :

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

위치를 우리와 HTML 텍스트이 방법 설정 :

.on("mousemove", function(d) { 
    tooltip.html("Value: " + (d[1] - d[0])) 
     .style('top', d3.event.pageY - 10 + 'px') 
     .style('left', d3.event.pageX + 10 + 'px') 
     .style("opacity", 0.9); 
}).on("mouseout", function() { 
    tooltip.style("opacity", 0) 
}); 

을 그리고 여기입니다 데모 : https://bl.ocks.org/anonymous/raw/f6294c4d8513dbbd8152770e0750efd9/