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

redress 发表于 Dev

纠正

我有一个条形图，每个条形的末尾都有文本值。我想做的是将文本设置为不可见，然后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)
});

Xenyal

建议不要使用mouseoverand来代替and 。尝试这样的事情：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")
});*/