如何使用 d3-tip 为基于 d3.js 的可视化创建工具提示？

你的名字 2023-10-02 13:54 9阅读 0赞

要为基于 d3.js [d3.js][]（数据驱动文档）的可视化创建工具提示，解决方案是使用[d3-tip][]。

[![b25c22e7ef8a0f9505533749c5cbe346.png][]][b25c22e7ef8a0f9505533749c5cbe346.png 1] 如何使用 d3-tip 为基于 d3.js 的可视化创建工具提示？

重现上述示例的脚本：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Example d3-tip with circle</title>
            <style>
    
                .d3-tip {
                    line-height: 1;
                    font-weight: bold;
                    padding: 12px;
                    background: rgba(0, 0, 0, 1.0);
                    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>
        </head>
        <body>
    
            <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
            <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
    
            <script>
    
                var tip = d3.tip()
                        .attr('class', 'd3-tip')
                        .offset([-10, 0])
                        .html(function (d) {
                            return "Hello Tip";
                        })
    
                var bodySelection = d3.select("body");
    
                var svgSelection = bodySelection.append("svg")
                        .attr("width", 200)
                        .attr("height", 200);
    
                svgSelection.call(tip);
    
                var new_circle = svgSelection.append("svg")
                        .append("circle")
                        .attr("cx", 100)
                        .attr("cy", 100)
                        .attr("r", 25)
                        .style("fill", "red")
                        .on('mouseover', tip.show)
                        .on('mouseout', tip.hide);
    
            </script>
        </body>
    </html>

[d3.js]: https://d3js.org/
[d3-tip]: http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js
[b25c22e7ef8a0f9505533749c5cbe346.png]: https://img-blog.csdnimg.cn/img_convert/b25c22e7ef8a0f9505533749c5cbe346.png
[b25c22e7ef8a0f9505533749c5cbe346.png 1]: https://moonbooks.org/Articles/How-to-create-a-tooltip-for-d3js-using-d3-tip-/#myGallery