s434776/PRI_2020-FE
2
0
Fork 0
Code Issues Pull Requests Releases Activity

Add graph tooltip styling

Browse Source
This commit is contained in:
Michał Romaszkin 2020-05-21 19:37:35 +02:00
parent 1735d9ddb8
commit feea416d9f
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/app/view/view-data/view-data.component.ts
View File

@ -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ść:<br> ${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)