當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

D3js（五）：tooltips

發(fā)布時(shí)間：2024/9/15 编程问答 27 豆豆

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

文章目錄

何為tooltips?
實(shí)現(xiàn)小貼士的2種方法：
- 增加title標(biāo)簽，text就是title的內(nèi)容，默認(rèn)mouseover，mouseout處理
- 定義tooltips，定義處理mouseover，mouseout
完整示例

何為tooltips?

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

實(shí)現(xiàn)小貼士的2種方法：

增加title標(biāo)簽，text就是title的內(nèi)容，默認(rèn)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", "華文細(xì)黑", "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", "華文細(xì)黑", "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":"好糾結(jié)","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":"好糾結(jié)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":"好糾結(jié)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":"好糾結(jié)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格式轉(zhuǎn)化為力學(xué)圖可用的格式.nodes(d3.values(nodes))//設(shè)定節(jié)點(diǎn)數(shù)組.links(links)//設(shè)定連線數(shù)組.size([width, height])//作用域的大小.linkDistance(150)//連接線長(zhǎng)度//.gravity(.0001).charge(-800)//頂點(diǎn)的電荷數(shù)。該參數(shù)決定是排斥還是吸引，數(shù)值越小越互相排斥.on("tick", tick)//指時(shí)間間隔，隔一段時(shí)間刷新一次畫面.start();//開始轉(zhuǎn)換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")//在圓圈中加上數(shù)據(jù).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>

總結(jié)

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

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

上一篇： D3js（四）：箭头arrow
下一篇： Docker User Guide