Question

我正在尝试在鼠标悬停时向条形图上的每个栏添加文字工具提示。我是d3的新手，所以我在添加文本方面遇到了麻烦。我尝试过的是我在网上找到的不同策略的组合，但我仍然没有得到提示。不知道我错过了什么或我哪里出错了。任何帮助表示赞赏。

谢谢！

                    bar.enter()
                        .append("g")
                        .attr("class", "bar-container")
                        .append("rect")
                        .attr("class", "bar")
                        .attr('fill','#4EC7BD')
                        .attr("x", function(d) { return x(d.id); })
                        .attr("y", function(d) { return y(eval('d.'+scope.metric)); })
                        .attr("height", function(d) { return height - y(eval('d.'+scope.metric)); })
                        .attr("width", x.rangeBand())
                        .on('click', function(d){
                            scope.showDetails(d, eval('d.'+scope.metric))
                        })

                        // start tooltip
                        .on("mouseover", function(d){
                            console.log("D",scope.metric);

                            var xPos = parseFloat(d3.select(this).attr("x"));
                            var yPos = parseFloat(d3.select(this).attr("y"));
                            var height = parseFloat(d3.select(this).attr("height"))

                            d3.select(this)
                                .append("text")
                                .attr("class", "d3tip")
                                .attr("x",xPos)
                                .attr("y",yPos +height/2)
                                .text("test");
                            })
                        .on("mouseout",function(){
                            d3.select(".tooltip").remove();
                        });
                    // end tooltip

                    // removed data:
                    bar.exit().remove();
                    // updated data:
                    bar
                        .transition()
                        .duration(750)
                        .attr("y", function(d) { return y(eval('d.'+scope.metric)); })
                        .attr("height", function(d) { return height - y(eval('d.'+scope.metric)); });

Answer 1

This answer让我得到了我需要的地方。

解决方案：

            var tooltip = d3.select("body")
                .append("div")
                .style("position", "absolute")
                .style("z-index", "10")
                .style("visibility", "hidden");

                    bar.enter()
                        .append("g")
                        .attr("class", "bar-container")
                        .append("rect")
                        .attr("class", "bar")
                        .attr('fill','#4EC7BD')
                        .attr("x", function(d) { return x(d.id); })
                        .attr("y", function(d) { return y(eval('d.'+scope.metric)); })
                        .attr("height", function(d) { return height - y(eval('d.'+scope.metric)); })
                        .attr("width", x.rangeBand())
                        .on('click', function(d){
                            scope.showDetails(d, eval('d.'+scope.metric))
                        })
                        // tooltip
                        .on("mouseover", function(d){
                            tooltip.text(eval('d.'+scope.metric));
                            return tooltip.style("visibility", "visible");
                        })
                        .on("mousemove", function(){return tooltip.style("top",
                            (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
                        .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

将文字提示添加到条形图d3

1 个答案: