实现如下效果，不是简单的文本，而是有样式的文本

1、配置一个tooltips的div块：

                var tooltip = d3.select("#graph").append("div").attr("class", "tooltip").style("opacity", 0);

2、配置tooltips div块的css：

    <style>#graph .tooltip {position: absolute;padding: 2px;text-align: left;font: 8px "Hiragino Sans GB", "华文细黑", "STHeiti", "微软雅黑", "Microsoft YaHei", SimHei, "Helvetica Neue", Helvetica, Arial, sans-serif !important;background: rgba(0, 0, 0, .87);color: #fff;height:auto;border: 0px;border-radius:2px;pointer-events: none;}#graph .tooltip hr {padding: 0;margin: 2px 0;}</style>

3、配置节点上的事件处理：

                    .on("mouseover", function (d) {var node_info = ''# 定义node_info的处理# node_info为html文本格式# 类似：'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'if (node_info) {tooltip.transition().duration(200).style("opacity", .9);tooltip.html(node_info).style("left", (d3.event.pageX) + "px").style("top", (d3.event.pageY - 28) + "px");}}).on("mouseout", function () {tooltip.transition().duration(500).style("opacity", 0);}).call(force.drag);//将当前选中的元素传到drag函数中，使顶点可以被拖动

D3js（六）：支持css的tooltips相关推荐

[译]Web Inspector开始支持CSS区域
最近,开发人员和设计师们可以在WebKit中尝试使用CSS区域特性了,我们认为是时候给他们一些开发工具了.最新版本的Chrome Canary中的web inspector现在已经支持下面这些功能: ...
HTML字体小于12谷歌不兼容,Chrome谷歌浏览器下不支持css字体小于12px的解决办法...
coder.png 在这一年的工作中,我发现很多问题你利用自己的「聪明才智」绕过去了,总有一天它会和你不期而遇,今天我们就来直面一个字体兼容性的小问题:Chrome谷歌浏览器下不支持css字体小于12 ...
win10 html css,Win10创造者更新:Edge支持CSS自定义属性
下月即将推出的Win10创造者更新正式版中,微软将为默认浏览器MicrosoftEdge带来更多的扩展支持,并默认阻止Flash内容运行.而现在,微软又宣布,Edge浏览器正式支持CSS自定义属性. ...
java-使用 flying-saucer 通过 xhtml 生成 pdf 文档支持 css 和图片
java-使用 flying-saucer 通过 xhtml 生成 pdf 文档支持 css 和图片重要说明: 1.使用 xhtml 生成 pdf ,对于 xhtml 的语法要求非常严格: 2.中 ...
FireFox火狐浏览器不支持CSS中zoom属性的解决办法
首先需要明确一点的是,火狐浏览器全系列不支持CSS的zoom缩放属性. 浏览器兼容查询网站:https://caniuse.com/ 所以此时只能通过transform的scale实现放缩代码很简单 ...
Web前端开发笔记——第三章 CSS语言第六节 CSS定位
目录一.定义二.文档流定位 (一)block类型元素 (二)inline类型元素 (三)inline-block类型元素三.浮动定位 (一)左浮动和右浮动 (二)清除浮动四.层定位 (一)st ...
css（六）--css高级技巧
一.精灵图 1.为什么需要精灵技术一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. 目的: ...
IE, FireFox, Opera 浏览器支持CSS实现Alpha半透明的方法
这个世界变化很快,IE8也快出来了,它将不在支持以前{filter:alpha(opacity=50);}的私有属性,转而支持更规范的私有属性-ms-filter: "progid:DXIm ...
D3js（五）：tooltips
文章目录何为tooltips? 实现小贴士的2种方法: 增加title标签,text就是title的内容,默认mouseover,mouseout处理定义tooltips,定义处理mouseove ...

D3js（六）：支持css的tooltips

文章目录

实现如下效果，不是简单的文本，而是有样式的文本

1、配置一个tooltips的div块：

2、配置tooltips div块的css：

3、配置节点上的事件处理：

D3js（六）：支持css的tooltips相关推荐

最新文章

热门文章