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変数を宣言した後も、この行を含める必要があります：あなたは、次のような2行を追加することによってそれを行うことができます

svg.call(tip); 

Plunkr更新

ここをクリック - http://plnkr.co/edit/X3O44dBuOGzEkqjUkyUC?p=preview