文章目錄

• 實現如下效果，不是簡單的文本，而是有樣式的文本
• 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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。