何为tooltips?

tips就是小贴士，tooltips就是小贴士工具

实现小贴士的2种方法：

增加title标签，text就是title的内容，默认mouseover，mouseout处理

  node.append("title").text(function(d) { return d.name; });

定义tooltips，定义处理mouseover，mouseout

    var tooltip = d3.select("#render").append("div").attr("class", "tooltip").style("opacity", 0);var node =svg.selectAll(".node").data(force.nodes()).enter().append('g').attr("class", "node").on("mouseover", function (d) {if (d.tooltip) {tooltip.transition().duration(200).style("opacity", .9);tooltip.html(d.tooltip).style("left", (d3.event.pageX) + "px").style("top", (d3.event.pageY - 28) + "px");}}).on("mouseout", function (d) {if (d.tooltip) {tooltip.transition().duration(500).style("opacity", 0);}}).call(force.drag);

完整示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#render {overflow: auto;text-align: center;}#render .node {cursor: pointer;}#render .node circle {fill: #fff;stroke: steelblue;stroke-width: 1.5px;}#render .node text {font: 16px "Hiragino Sans GB", "华文细黑", "STHeiti", "微软雅黑", "Microsoft YaHei", SimHei, "Helvetica Neue", Helvetica, Arial, sans-serif !important;}#render .link {fill: none;stroke: #ccc;stroke-width: 1.5px;}#render .tooltip {position: absolute;padding: 8px;text-align: left;font: 16px "Hiragino Sans GB", "华文细黑", "STHeiti", "微软雅黑", "Microsoft YaHei", SimHei, "Helvetica Neue", Helvetica, Arial, sans-serif !important;background: rgba(0, 0, 0, .87);color: #fff;border: 0px;border-radius: 8px;pointer-events: none;}#render .tooltip hr {padding: 0;margin: 8px 0;}</style><script src="http://d3js.org/d3.v3.min.js"></script></head>
<body>
<div id="render"></div>
</body><script>var nodes = {};links = [{"source":{name: 'Nexus 4',tooltip: 'Dimensions:<br/>5.43 x 2.72 x 0.34 inches (137.84 x 69.17 x 8.59 mm)<hr/>Resolution:<br/>1080 x 1920 pixels<hr/>Processor:<br/>Quad-core, 2260 MHz, Krait 400'},"relation":"好纠结","target":{name: 'Nexus 9',tooltip: 'Dimensions:<br/>5.43 x 2.72 x 0.34 inches (137.84 x 69.17 x 8.59 mm)<hr/>Resolution:<br/>1080 x 1920 pixels<hr/>Processor:<br/>Quad-core, 2260 MHz, Krait 400'}},{"source":{name: 'Nexus 9',tooltip: 'Dimensions:<br/>5.43 x 2.72 x 0.34 inches (137.84 x 69.17 x 8.59 mm)<hr/>Resolution:<br/>1080 x 1920 pixels<hr/>Processor:<br/>Quad-core, 2260 MHz, Krait 400'},"relation":"好纠结3","target":{name: 'Nexus 7',tooltip: 'Dimensions:<br/>5.43 x 2.72 x 0.34 inches (137.84 x 69.17 x 8.59 mm)<hr/>Resolution:<br/>1080 x 1920 pixels<hr/>Processor:<br/>Quad-core, 2260 MHz, Krait 400'}},{"source":{name: 'Nexus 8',tooltip: 'Dimensions:<br/>5.43 x 2.72 x 0.34 inches (137.84 x 69.17 x 8.59 mm)<hr/>Resolution:<br/>1080 x 1920 pixels<hr/>Processor:<br/>Quad-core, 2260 MHz, Krait 400'},"relation":"好纠结1","target":{name: 'Nexus 9',tooltip: 'Dimensions:<br/>5.43 x 2.72 x 0.34 inches (137.84 x 69.17 x 8.59 mm)<hr/>Resolution:<br/>1080 x 1920 pixels<hr/>Processor:<br/>Quad-core, 2260 MHz, Krait 400'}},{"source":{name: 'Nexus 1',tooltip: 'Dimensions:<br/>5.43 x 2.72 x 0.34 inches (137.84 x 69.17 x 8.59 mm)<hr/>Resolution:<br/>1080 x 1920 pixels<hr/>Processor:<br/>Quad-core, 2260 MHz, Krait 400'},"relation":"好纠结2","target":{name: 'Nexus 4',tooltip: 'Dimensions:<br/>5.43 x 2.72 x 0.34 inches (137.84 x 69.17 x 8.59 mm)<hr/>Resolution:<br/>1080 x 1920 pixels<hr/>Processor:<br/>Quad-core, 2260 MHz, Krait 400'}}]links.forEach(function (link) {link.source = nodes[link.source.name] || (nodes[link.source.name] = link.source);link.target = nodes[link.target.name] || (nodes[link.target.name] = link.target)});var margin = {top: 20,right: 120,bottom: 20,left: 120},width = 960 - margin.right - margin.left,height = 960 - margin.top - margin.bottom;var tooltip = d3.select("#render").append("div").attr("class", "tooltip").style("opacity", 0);var svg = d3.select("#render").append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");var force = d3.layout.force()//layout将json格式转化为力学图可用的格式.nodes(d3.values(nodes))//设定节点数组.links(links)//设定连线数组.size([width, height])//作用域的大小.linkDistance(150)//连接线长度//.gravity(.0001).charge(-800)//顶点的电荷数。该参数决定是排斥还是吸引，数值越小越互相排斥.on("tick", tick)//指时间间隔，隔一段时间刷新一次画面.start();//开始转换var link = svg.selectAll(".link").data(force.links()).enter().append("line").attr("class", "link");var node =svg.selectAll(".node").data(force.nodes()).enter().append('g').attr("class", "node").on("mouseover", function (d) {if (d.tooltip) {tooltip.transition().duration(200).style("opacity", .9);tooltip.html(d.tooltip).style("left", (d3.event.pageX) + "px").style("top", (d3.event.pageY - 28) + "px");}}).on("mouseout", function (d) {if (d.tooltip) {tooltip.transition().duration(500).style("opacity", 0);}}).call(force.drag);node.append("circle").style("fill","red").style("opacity", .1).attr("r", 30);node.append("text").attr("dy", ".35em").attr("text-anchor", "middle")//在圆圈中加上数据.text(function(d) { return d.name; });force.on("tick", tick);function tick() {link.attr("x1", function(d) { return d.source.x; }).attr("y1", function(d) { return d.source.y; }).attr("x2", function(d) { return d.target.x; }).attr("y2", function(d) { return d.target.y; });node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });};</script>
</html>

D3js（五）：tooltips相关推荐

D3js（六）：支持css的tooltips
文章目录实现如下效果,不是简单的文本,而是有样式的文本 1.配置一个tooltips的div块: 2.配置tooltips div块的css: 3.配置节点上的事件处理: 实现如下效果,不是简单的文 ...
五款炫酷精美动态登录页面，彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码
完整源码详见微信公众号:创享日记对话框发送:登录页面获取HTML+CSS+js等源码文件一.彩虹气泡登录页面效果图: HTML源码: <!DOCTYPE html> <ht ...
五分钟搭建一个基于BERT的NER模型
BERT 简介 BERT是2018年google 提出来的预训练的语言模型,并且它打破很多NLP领域的任务记录,其提出在nlp的领域具有重要意义.预训练的(pre-train)的语言模型通过无监督的学 ...
Spring Data JPA 五分钟快速入门和实践
Spring Data JPA(类似于Java Web 中的 DAO) 操作声明持久层的接口(Repository) 三个核心接口: CrudRepository PagingAndSortingRe ...
操作系统学习笔记第五章：文件管理（王道考研）
本文章基于网课: 2019 王道考研操作系统考试复习推荐资料:操作系统复习总结 - 百度文库 (baidu.com) 需要相关电子书的可以关注我的公众号BaretH后台回复操作系统第一章:操作系 ...
王道考研计算机网络笔记第五章：传输层
本文基于2019 王道考研计算机网络: 2019 王道考研计算机网络个人笔记总结第一章:王道考研计算机网络笔记第一章:概述&计算机网络体系结构第二章:王道考研计算机网络笔记第 ...
TVM性能评估分析（五）
TVM性能评估分析(五) Figure 3. A futher speed up with operator fusion Table 1. Performance issue of cuBLAS' ...
AlexeyAB DarkNet YOLOv3框架解析与应用实践（五）
AlexeyAB DarkNet YOLOv3框架解析与应用实践(五) RNNs in Darknet 递归神经网络是表示随时间变化的数据的强大模型.为了更好地介绍RNNs,我强烈推荐Andrej K ...
大数据调度平台Airflow（五）：Airflow使用
目录 Airflow使用一.Airflow调度Shell命令 1.首先我们需要创建一个python文件,导入需要的类库 2.实例化DAG 3.定义Task 4.设置task依赖关系 5.上传pyth ...

D3js（五）：tooltips

文章目录

何为tooltips?

实现小贴士的2种方法：

增加title标签，text就是title的内容，默认mouseover，mouseout处理

定义tooltips，定义处理mouseover，mouseout

完整示例

D3js（五）：tooltips相关推荐

最新文章

热门文章