Add graph tooltip styling
This commit is contained in:
parent
1735d9ddb8
commit
feea416d9f
@ -121,10 +121,21 @@ export class ViewDataComponent implements OnInit, AfterViewInit {
|
|||||||
.html(`Wiadomość: ${d.data.message}`)
|
.html(`Wiadomość: ${d.data.message}`)
|
||||||
.style('left', `${d3.select(this).attr('cx')}px`)
|
.style('left', `${d3.select(this).attr('cx')}px`)
|
||||||
.style('top', `${d3.select(this).attr('cy')}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
|
nodeEnter
|
||||||
.append('text')
|
.append('text')
|
||||||
.attr('x', (d: any) => d.x)
|
.attr('x', (d: any) => d.x)
|
||||||
|
Loading…
Reference in New Issue
Block a user