[D3] Add hovercard
The way to add hovercard is
- Append a div with class 'hovercard'
- in the tick function, positioning the hovercard with 'd3.event.pageX and pageY'
.hovercard {
position: absolute;
max-width: 400px;
height: auto;
padding: 5px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
font: 12px sans-serif;
}
const hovercard = d3.select('body')
.append('div')
.attr('class', 'hovercard')
.style('opacity', 0)
.style('width', 400);
function ticked() { // adjust nodes containers position
svgNodes
.attr('transform', d =>`translate(${d.x},${d.y})`)
.call(d3.drag()
.on('start', dragstarted)
.on('drag', dragged)
.on('end', dragended)); // Curve paths
path
.attr('d', (d) => {
const curve = d.battle_number * .5;
const dx = d.target.x - d.source.x;
const dy = d.target.y - d.source.y;
const dr = Math.sqrt(dx * dx * curve + dy * dy * curve);
return `M${d.source.x},${d.source.y}A${dr},${dr} 0 0,1 ${d.target.x},${d.target.y}`;
}); path.on('mouseover', d => { hovercard
.transition()
.duration(300)
.delay(20)
.style('opacity', 1); const tip =
'<h2>' + d.name + '</h2>' +
'<h4>' + d.source.name + ' attacked ' + d.target.name + ' and the outcome was a ' + d.attacker_outcome + '</h4>' +
'<h3>Details</h3>' +
'<strong> Attacker King: </strong>'+d.attacker_king + '<br/>'+
'<strong> Battle Type: </strong>'+d.battle_type + '<br/>'+
'<strong> Major Death?: </strong>'+d.major_death + '<br/>'+
'<strong> Major Capture?: </strong>'+d.major_capture + '<br/>'+
'<strong> Attacker Size: </strong>'+d.value + '<br/>'+
'<strong> Defender Size: </strong>'+d.defender_size + '<br/>'+
'<strong> Region / Location: </strong>'+d.region+ ' / ' + d.location + '<br/>'+
'<strong> Attacking Commander: </strong>'+d.attacker_commander + '<br/>'+
'<strong> Defending Commander: </strong>'+d.defender_commander; hovercard
.html(tip)
.style('left', d3.event.pageX + 'px')
.style('top', d3.event.pageY + 'px');
}); path.on('mouseout', d => {
hovercard
.transition()
.duration(500)
.style('opacity', 0);
}); }
});
[D3] Add hovercard的更多相关文章
- [D3] Add label text
If we want to add text to a node or a image // Create container for the images const svgNodes = svg ...
- [D3] Add image to the node
We can create node with 'g' container, then append 'image' to the nodes. // Create container for the ...
- 【精心推荐】几款实用的 JavaScript 图形图表库
一款好的图表插件不是那么容易找到的.最近项目里需要实现统计图表功能,所以在网上搜罗了一圈,找到一些不错的图表插件,分享大家.众多周知,图形和图表要比文本更具表现力和说服力.这里给大家精心推荐几款实用的 ...
- 几款实用的 JavaScript 图形图表库
一款好的图表插件不是那么容易找到的.最近项目里需要实现统计图表功能,所以在网上搜罗了一圈,找到一些不错的图表插件,分享大家.众多周知,图形和图表要比文本更具表现力和说服力.这里给大家精心推荐几款实用的 ...
- NAND FLASH ECC校验原理与实现
ECC简介 由于NAND Flash的工艺不能保证NAND的Memory Array在其生命周期中保持性能的可靠,因此,在NAND的生产中及使用过程中会产生坏块.为了检测数据的可靠性,在应用NAND ...
- Hat's Fibonacci(大数加法+直接暴力)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1250 hdu1250: Hat's Fibonacci Time Limit: 2000/1000 M ...
- Unity XLua 官方教程学习
一.Lua 文件加载 1. 执行字符串 using UnityEngine; using XLua; public class ByString : MonoBehaviour { LuaEnv lu ...
- HDU 6071 Lazy Running(最短路)
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6071 [题目大意] 给出四个点1,2,3,4,1和2,2和3,3和4,4和1 之间有路相连, 现在 ...
- Exce信息提取
Exce信息提取 Private Declare Sub Sleep Lib "kernel32" (ByVal dwMilliseconds As Long) Sub 信息汇总( ...
随机推荐
- 【Henu ACM Round #12 E】Thief in a Shop
[链接] 我是链接,点我呀:) [题意] n个物品,每个物品都有无限个. 第i个物品的价格是一样都,都是ai 让你从中选出恰好k个物品 问你选出的物品的总价值 有多少种不同的可能. [题解] 可以用f ...
- [Python] Use Python Classes
Object oriented classes work much like classes in other languages. Learn how to create them and use ...
- 压缩感知——SP(subspace pursuit)重构算法前言翻译
压缩感知是一种採样方法,它和变换编码类似,后者被广泛用于涉及到大规模数据採样的现代通信系统中.变换编码将高维空间中的输入信号.转换成很低的低维空间中的信号.变换编码器的样例有著名的小波变换和普遍存在的 ...
- RvmTranslator6.1 - Attribute List
RvmTranslator6.1 - Attribute List eryar@163.com 1. Introduction RvmTranslator can translate the RVM ...
- codeforce 571 B Minimization
题意:给出一个序列,经过合适的排序后.使得最小. 做法:将a升序排序后,dp[i][j]:选择i个数量为n/k的集合,选择j个数量为n/k+1的集合的最小值. 举个样例, a={1,2,3,4,5,6 ...
- Advanced-REST-client-http接口测试工具
前言 作为一名在IT金字塔底层的苦逼码农也会接触http接口,各位开发大佬肯定也会有需要写或者测试http接口的时候.大多数接口测试工具都需要本地安装客户端,我这里分享一个谷歌浏览器的测试接口插件非常 ...
- php汉字转化为拼音函数
<?php function Pinyin($_String, $_Code='gb2312'){ $_DataKey = "a|ai|an|ang|ao|ba|bai|ban|ban ...
- 一个简单RPC框架是怎样炼成的(II)——制定RPC消息
开局篇我们说了,RPC框架的四个核心内容 RPC数据的传输. RPC消息 协议 RPC服务注冊 RPC消息处理 以下,我们先看一个普通的过程调用 class Client(object): def _ ...
- 測试CPU支持指令集AVX,AVX2,SSE情况的代码【VS2010调试通过】
完整代码例如以下所看到的 http://download.csdn.net/detail/vbskj/7723827 本人的測试结果 watermark/2/text/aHR0cDovL2Jsb2cu ...
- POJ 1113 Wall 求凸包
http://poj.org/problem?id=1113 不多说...凸包网上解法很多,这个是用graham的极角排序,也就是算导上的那个解法 其实其他方法随便乱搞都行...我只是测一下模板... ...