當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

D3js（五）：tooltips

發布時間：2024/9/15 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 D3js（五）：tooltips 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

何為tooltips?
實現小貼士的2種方法：
- 增加title標簽，text就是title的內容，默認mouseover，mouseout處理
- 定義tooltips，定義處理mouseover，mouseout
完整示例

何為tooltips?

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

實現小貼士的2種方法：

增加title標簽，text就是title的內容，默認mouseover，mouseout處理

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

定義tooltips，定義處理mouseover，mouseout

完整示例

<!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（四）：箭头arrow
下一篇： Docker User Guide