[Solved]-How to display text on donut chart for mouseover event-d3.js

var data = [{
    label: 'star wars',
    instances: 207
}, {
    label: 'lost in space',
    instances: 3
}, {
    label: 'the boston pops',
    instances: 20
}, {
    label: 'indiana jones',
    instances: 150
}, {
    label: 'harry potter',
    instances: 75
}, {
    label: 'jaws',
    instances: 5
}, {
    label: 'lincoln',
    instances: 1
}];

svg = d3.select("svg");
canvas = d3.select("#canvas");
art = d3.select("#art");
labels = d3.select("#labels");

canvas.append("circle")
    .attr('cx', 0)
    .attr('cy', 0)
    .attr('fill', 'pink')
    .attr('r', 48);
canvas.append("text")
    .attr("text-anchor", "middle")
    .attr('font-size', '12px')
    .attr('y', 0)
    .attr('id', 'center-text')
    .text('teest for a long veery text');

// wrap text in a rectangle.
    d3plus.textwrap()
      .container(d3.select("#center-text"))
      .resize(true)
      .draw();

// create the pie layout function.
// this function will add convenience
// data to our existing data, like 
// the start angle and end angle
// for each data element.
jhw_pie = d3.layout.pie()
jhw_pie.value(function(d, i) {
    // tells the layout function what
    // property of our data object to
    // use as the value.
    return d.instances;
});

// store our chart dimensions
cdim = {
    height: 500,
    width: 500,
    innerradius: 50,
    outerradius: 150,
    labelradius: 175
}

// set the size of our svg element
svg.attr({
    height: cdim.height,
    width: cdim.width
});

// this translate property moves the origin of the group's coordinate
// space to the center of the svg element, saving us translating every
// coordinate individually. 
canvas.attr("transform", "translate(" + (cdim.width / 2) + "," + (cdim.width / 2) + ")");

pied_data = jhw_pie(data);

// the pied_arc function we make here will calculate the path
// information for each wedge based on the data set. this is 
// used in the "d" attribute.
pied_arc = d3.svg.arc()
    .innerradius(50)
    .outerradius(150);


const eventobj = {
    mouseover: function(d, i, j) {
        d3.select('#center-text').text(d.data.label);
        d3plus.textwrap()
      .container(d3.select("#center-text"))
      .resize(true)
      .draw();
    },
    mouseout: function(d, i, j) {
        d3.select('#center-text').text('');
        d3plus.textwrap()
      .container(d3.select("#center-text"))
      .resize(true)
      .draw();
    },


    click: function(d, i, j) {
        {
            {
                /* console.log(d, i, j);
                              var thispath = d3.select(this);
                              var clicked = thispath.classed('clicked');
                              pathanim(thispath, ~~(!clicked));
                              thispath.classed('clicked', !clicked); */
            }
        }
    }
};

var pathanim = function(path, dir) {
    switch (dir) {
        case 0:
            path.transition()
                .duration(500)
                .ease('bounce')
                .attr('d', d3.svg.arc()
                    .innerradius((radius - 100))
                    .outerradius(radius - 50)
                );
            break;

        case 1:
            path.transition()
                .attr('d', d3.svg.arc()
                    .innerradius((radius - 100))
                    .outerradius((radius - 50) * 1.08)
                );
            break;
    }
}

// this is an ordinal scale that returns 10 predefined colors.
// it is part of d3 core.
pied_colors = d3.scale.category10();

// let's start drawing the arcs.
enteringarcs = art.selectall(".wedge").data(pied_data).enter();

enteringarcs.append("path")
    .attr("class", "wedge")
    .attr("d", pied_arc)
    .on('click', (d) => {
        eventobj.click(d)
    })
    .on('mouseover', (d) => {
        eventobj.mouseover(d)
    })
    .on('mouseout', (d) => {
        eventobj.mouseout(d)
    })
    .style("fill", function(d, i) {
        return pied_colors(i);
    });

// now we'll draw our label lines, etc.
enteringlabels = labels.selectall(".label").data(pied_data).enter();
labelgroups = enteringlabels.append("g").attr("class", "label");
labelgroups.append("circle").attr({
    x: 0,
    y: 0,
    r: 2,
    fill: "#000",
    transform: function(d, i) {
        centroid = pied_arc.centroid(d);
        return "translate(" + pied_arc.centroid(d) + ")";
    },
    'class': "label-circle"
});

// "when am i ever going to use this?" i said in 
// 10th grade trig.
textlines = labelgroups.append("line").attr({
    x1: function(d, i) {
        return pied_arc.centroid(d)[0];
    },
    y1: function(d, i) {
        return pied_arc.centroid(d)[1];
    },
    x2: function(d, i) {
        centroid = pied_arc.centroid(d);
        midangle = math.atan2(centroid[1], centroid[0]);
        x = math.cos(midangle) * cdim.labelradius;
        return x;
    },
    y2: function(d, i) {
        centroid = pied_arc.centroid(d);
        midangle = math.atan2(centroid[1], centroid[0]);
        y = math.sin(midangle) * cdim.labelradius;
        return y;
    },
    'class': "label-line"
});

textlabels = labelgroups.append("text").attr({
    x: function(d, i) {
        centroid = pied_arc.centroid(d);
        midangle = math.atan2(centroid[1], centroid[0]);
        x = math.cos(midangle) * cdim.labelradius;
        sign = (x > 0) ? 1 : -1
        labelx = x + (5 * sign)
        return labelx;
    },
    y: function(d, i) {
        centroid = pied_arc.centroid(d);
        midangle = math.atan2(centroid[1], centroid[0]);
        y = math.sin(midangle) * cdim.labelradius;
        return y;
    },
    'text-anchor': function(d, i) {
        centroid = pied_arc.centroid(d);
        midangle = math.atan2(centroid[1], centroid[0]);
        x = math.cos(midangle) * cdim.labelradius;
        return (x > 0) ? "start" : "end";
    },
    'class': 'label-text'
}).text(function(d) {
    return d.data.label
});

alpha = 0.5;
spacing = 12;

function relax() {
    again = false;
    textlabels.each(function(d, i) {
        a = this;
        da = d3.select(a);
        y1 = da.attr("y");
        textlabels.each(function(d, j) {
            b = this;
            // a & b are the same element and don't collide.
            if (a == b) return;
            db = d3.select(b);
            // a & b are on opposite sides of the chart and
            // don't collide
            if (da.attr("text-anchor") != db.attr("text-anchor")) return;
            // now let's calculate the distance between
            // these elements. 
            y2 = db.attr("y");
            deltay = y1 - y2;

            // our spacing is greater than our specified spacing,
            // so they don't collide.
            if (math.abs(deltay) > spacing) return;

            // if the labels collide, we'll push each 
            // of the two labels up and down a little bit.
            again = true;
            sign = deltay > 0 ? 1 : -1;
            adjust = sign * alpha;
            da.attr("y", +y1 + adjust);
            db.attr("y", +y2 - adjust);
        });
    });
    // adjust our line leaders here
    // so that they follow the labels. 
    if (again) {
        labelelements = textlabels[0];
        textlines.attr("y2", function(d, i) {
            labelforline = d3.select(labelelements[i]);
            return labelforline.attr("y");
        });
        settimeout(relax, 20)
    }
}

relax();

.label-text {
  alignment-baseline: middle;
  font-size: 12px;
  font-family: arial,helvetica,"sans-serif";
  fill: #393939;
}
.label-line {
  stroke-width: 1;
  stroke: #393939;
}
.label-circle {
  fill: #393939;
}

<svg>
  <g id="canvas">
  <g id="art" />
  <g id="labels" /></g>
</svg>
<p>it could be worse, i could have been named "michael bolton."</p>
<script type="text/javascript" src="//d3js.org/d3.v3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>