After following a tutorial on creating a scatter plot using this reference, everything worked perfectly in version 3. However, upon switching to version 4, I encountered issues with the tooltip, x-axis, and y-axis not appearing.
To troubleshoot, I created a Plunker showcasing the code. Any insights on what might be causing the problem would be greatly appreciated.
function showTooltip (d, i) {
//Save the chosen circle (not the voronoi)
var element = d3.selectAll(".countries."+d.CountryCode);
//Define and display the tooltip
$(element).popover({
placement: 'auto top',
container: '#chart',
trigger: 'manual',
html : true,
content: function() {
return "<span style='font-size: 12px; text-align: center;'>" + "<span>" + "Speaker: " + "</span>" + d.Speaker + "\n"
+ "<span>" + "Duration: " + "</span>" + Math.round(d.Duration) + "\n" +"</span>"; }
});
$(element).popover('show');
//Enhance visibility of chosen circle
element.style("opacity", 1)
.style("stroke-width", 6);
Update:
A corrected version of the scatter plot in v4 of d3 can be found here. Big thanks to Lary for assisting me in resolving the issue.