工具提示显示组的单个元素

Question

我有条形图，每个条形的末尾都有文字值。我想要做的是将文本设置为不可见，并在mouseover上我希望它显示与条形相关联的数字，在该条形的大小。我无法找到如何以有效的方式做到这一点。

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

var rect = svg.selectAll("rect")
    .attr("class", "rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("y", function(d,i){
        return yScale(i);
    })
    .attr("x", 0)
    .attr("width", function(d,i){
        return xScale(d);
    })
    .attr("height", h/dataset.length)
    .style("fill", function(d,i){
        return colors(d);
    })

.on("mouseover", function(d){
    d3.select(this).style("opacity", 0.5)
    tooltip.transition()
            .duration(200)
            .style("opacity", 1);

    tooltip.html(d)
            .style("left", d3.event.pageX + "px")
            .style("top", d3.event.pageY + "px")
})

.on("mouseout", function(d){
    d3.select(this).style("opacity", 1)
    tooltip.transition()
            .duration(500)
            .style("opacity", 0)
});

Answer 1

我推荐使用mouseover和mouseout来代替$(this).hover和$(this).mousemove。尝试这样的事情：

$(this).hover(
    function() {
        tooltip.transition()
            .duration(200)
            .style("opacity", 1)

            // In order to trigger the magnitude or 'width' of the rect:
            var rectWidth = $(this).attr("width");
    }, function () {
        tooltip.transition()
            .duration(500)
            .style("opacity", 1e-6)
    }
);

/*$(this).mousemove(function(event) {
    tooltip
        .style("left", event.clientX + "px")
        .style("top", event.clientY + "px")
});*/