Add graph tooltip styling

This commit is contained in:
Michał Romaszkin 2020-05-21 19:37:35 +02:00
parent 1735d9ddb8
commit feea416d9f

View File

@ -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)