文章目錄

• 實(shí)現(xiàn)如下效果，不是簡(jiǎn)單的文本，而是有樣式的文本
• 1、配置一個(gè)tooltips的div塊：
• 2、配置tooltips div塊的css：
• 3、配置節(jié)點(diǎn)上的事件處理：

實(shí)現(xiàn)如下效果，不是簡(jiǎn)單的文本，而是有樣式的文本

1、配置一個(gè)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", "華文細(xì)黑", "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、配置節(jié)點(diǎn)上的事件處理：

.on("mouseover", function (d) {var node_info = ''# 定義node_info的處理# node_info為html文本格式# 類(lèi)似：'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);//將當(dāng)前選中的元素傳到drag函數(shù)中，使頂點(diǎn)可以被拖動(dòng)

總結(jié)

以上是生活随笔為你收集整理的D3js（六）：支持css的tooltips的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。