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

最新推荐文章于 2024-03-17 09:48:51 发布

allway2

最新推荐文章于 2024-03-17 09:48:51 发布

阅读量1k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/allway2/article/details/121134615

版权

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

重现上述示例的脚本：

<!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>

allway2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用 d3-tip 为基于 d3.js 的可视化创建工具提示？

要为基于 d3.jsd3.js（数据驱动文档）的可视化创建工具提示，解决方案是使用d3-tip。如何使用 d3-tip 为基于 d3.js 的可视化创建工具提示？重现上述示例的脚本：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Example d3-tip with circle</title>.
复制链接

扫一扫