[Solved]-migration from v3 to v4 - tooltip not showing in d3-d3.js

for :

x-axis and y-axis not showing up

just remove :

 .axis .domain {
      display: none;
    }

from style

for :

tooltip,lines

change inside showtooltip function:

var element = d3.select(".countries."+d.CountryCode);

    //Define and show the tooltip
    $(element.node()).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.node()).popover('show');

//Make chosen circle more visible
element.style("opacity", 1)
    .style("stroke-width", 6);

//Append lines to bubbles that will be used to show the precise data points
//vertical line
d3.select(".chordWrapper").append("g")
    .attr("class", "guide")
    .append("line")
        .attr("x1", element.attr("cx"))
        .attr("x2", element.attr("cx"))
        .attr("y1", +element.attr("cy"))
        .attr("y2", (height))
        .style("stroke", element.style("fill"))
        .style("opacity",  0)
        .style("pointer-events", "none")
        .transition().duration(200)
        .style("opacity", 0.5);
//horizontal line
d3.select(".chordWrapper").append("g")
    .attr("class", "guide")
    .append("line")
        .attr("x1", +element.attr("cx"))
        .attr("x2", 0)
        .attr("y1", element.attr("cy"))
        .attr("y2", element.attr("cy"))
        .style("stroke",  element.style("fill"))
        .style("opacity",  0)
        .style("pointer-events", "none")
        .transition().duration(200)
        .style("opacity", 0.5);

and add :

.on("mouseover", showTooltip)
.on("mouseout",  removeTooltip);

to your circles (script.js line 84)

take a look here :

https://embed.plnkr.co/86jdbWgHtABY95ZEv9SE/