From feea416d9fe8ba2e6b03fe5f7fec832461a9a9e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Romaszkin?= Date: Thu, 21 May 2020 19:37:35 +0200 Subject: [PATCH] Add graph tooltip styling --- .../src/app/view/view-data/view-data.component.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/view/view-data/view-data.component.ts b/frontend/src/app/view/view-data/view-data.component.ts index 28ede59..3900fe9 100644 --- a/frontend/src/app/view/view-data/view-data.component.ts +++ b/frontend/src/app/view/view-data/view-data.component.ts @@ -121,10 +121,21 @@ export class ViewDataComponent implements OnInit, AfterViewInit { .html(`Wiadomość: ${d.data.message}`) .style('left', `${d3.select(this).attr('cx')}px`) .style('top', `${d3.select(this).attr('cy')}px`); + }) + .on('mouseover', (d) => { + tooltip.transition().duration(400).style('opacity', 1); + tooltip + .html(`Wiadomość:
${d.data.message}`) + .style('width', '15rem') + .style('background-color', '#fff') + .style('border', '1px solid black') + .style('left', `${d3.event.pageX + 40}px`) + .style('top', `${d3.event.pageY - 10}px`); + }) + .on('mouseout', function (d) { + tooltip.transition().duration(400).style('opacity', 0); }); - console.log(nodes.descendants()); - nodeEnter .append('text') .attr('x', (d: any) => d.x)