文章目录

• 实现如下效果，不是简单的文本，而是有样式的文本
• 1、配置一个tooltips的div块：
• 2、配置tooltips div块的css：
• 3、配置节点上的事件处理：

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

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的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。