D3JS 막대 차트 세로 방향에서 가로 방향으로의 도구 설명

Question

세로 막 대형 차트에 사용 된 툴팁을 가로 막 대형 차트에 사용 된 것으로 번역하려고합니다. 마우스 오버시 강조 할 막대를 가져 왔지만 툴팁이 나타나지 않습니다. 그래서 내 질문은 무엇을 놓치고 무엇입니까? 툴팁의 방향을 설정해야하는 곳이 있습니까? 또는 툴팁을 올바르게 호출하지 않습니까? 당신은 제대로 툴팁를 호출하지 않는 http://plnkr.co/edit/JhMRSAvxmvjqP4kE3X5v?p=preview

<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> 
var tip = d3.tip() 
    .attr('class', 'd3-tip') 
    .offset([-10, 0]) 
    .html(function(d) { 
     return "<strong>% Change in Income:</strong> <span style='color:#FFFFFF'>" + d.name; 
    }) 

Answer 1

:

여기 내 Plunker입니다. 도구 설명을 표시 할 때 알 수 있도록 막대에 mouseover 및 mouseout을 호출해야합니다. 당신은에 의해 다음과 같은 두 줄을 추가 것을 수행 할 수 있습니다 또한

svg.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", function(d) { return "bar bar--" + (d.value < 0 ? "negative" : "positive"); }) 
    .attr("x", function(d) { return x(Math.min(0, d.value)); }) 
    .attr("y", function(d) { return y(d.name); }) 
    .attr("width", function(d) { return Math.abs(x(d.value) - x(0)); }) 
    .attr("height", y.rangeBand()) 
    .on('mouseover', tip.show) //show tooltip when hovering over bar 
    .on('mouseout', tip.hide); //hide tooltip when not hovering over bar 

, 당신은 당신이 당신의 svg 변수를 선언 후 당신의 툴팁 함수를 호출 할 수 있도록이 줄을 포함해야합니다

svg.call(tip); 

업데이트 Plunkr 여기 - http://plnkr.co/edit/X3O44dBuOGzEkqjUkyUC?p=preview