[D3] Add hovercard
add D3
2023-09-14 09:00:51 时间
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); }); } });
相关文章
- Fatal error: Cannot redeclare wp_add_global_styles_for_blocks()
- ORA-01607: cannot add logfile to the specified instance ORACLE 报错 故障修复 远程处理
- ORA-01240: too many data files to add in one command ORACLE 报错 故障修复 远程处理
- ORA-09836: addCallback: could not add a port to the callback set. ORACLE 报错 故障修复 远程处理
- ORA-13111: cannot add topo_geometry layer [string] to topology ORACLE 报错 故障修复 远程处理
- ORA-15490: not all instances could add/drop the volume ORACLE 报错 故障修复 远程处理
- MySQL Error number: MY-013234; Symbol: ER_RPL_GTID_UNSAFE_ALTER_ADD_COL_WITH_DEFAULT_EXPRESSION; SQLSTATE: HY000 报错 故障修复 远程处理
- MySQL Error number: MY-013275; Symbol: ER_THREAD_POOL_PFS_TABLES_ADD_FAILED; SQLSTATE: HY000 报错 故障修复 远程处理
- Git撤销add、commit详解程序员
- 掌握ORACLE中ADD语法,助你轻松上分(add语法oracle)
- 用Oracle中的ADD语句来增加列(oracle中add语句)
- asp动态数组提供Add、Insert、Remove、RemoveAt、Search等方法。