顯示組中單個元素的工具提示

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

建議不要使用$(this).hover和$(this).mousemove進行mouseover和mouseout 。 嘗試這樣的事情：

$(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")
});*/