Question

我正在尝试将用于垂直条形图的工具提示转换为用于水平条形图的工具提示。我已经得到了鼠标悬停时突出显示的栏，但工具提示没有出现。所以我的问题是我错过了什么？有没有我需要设置工具提示方向的地方？或者我没有正确地调用工具提示？

这是我的Plunker：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

您没有正确调用工具提示。您需要为条形图调用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

D3JS条形图工具提示，从垂直平移到水平

1 个答案: