Undefined is not a function - JAVASCRIPT - D3

Question

Hi i have a donut pie chart and I want to make it grow when the page loads.

It was a normal donut chart that when i clicked on one of the element it would show it's info.

I added the growing part and it is working but my mouseclick part (that was working before the grow part) stopped working.

It says that "undefined is not a function" on the .on("mouseup", function(d, i) line.

So it works with the transition, it works with the mouseup but it's not working with both.

renderarcs.append('path')
    .attr('d',arc)
    .attr("fill", function(d, i) { return color(i); })

    .transition()
        .duration(2000)
        .attrTween("d", tweenPie)

    .on("mouseup", function(d, i){
            $("#mostra-nome-banda").html(arrayBandas[i]['name']);
            $("#pag-banda-plays").html(arrayBandas[i]['playcount']+" plays");
            linkArtista= arrayBandas[i]['url']

            d3.selectAll('path').transition()
                .duration(100)
                .attr("d", arc)

            d3.select(this).transition()
                .duration(100)
                .attr("d", arcOver);

        });

Answer 1

You need to add the handler before the transition:

renderarcs.append('path')
.attr('d',arc)
.attr("fill", function(d, i) { return color(i); })

.on("mouseup", function(d, i){
        $("#mostra-nome-banda").html(arrayBandas[i]['name']);
        $("#pag-banda-plays").html(arrayBandas[i]['playcount']+" plays");
        linkArtista= arrayBandas[i]['url']

        d3.selectAll('path').transition()
            .duration(100)
            .attr("d", arc)

        d3.select(this).transition()
            .duration(100)
            .attr("d", arcOver);

    })

.transition()
    .duration(2000)
    .attrTween("d", tweenPie);

Otherwise, you're attaching an event handler to the transition and not the selection . Transitions don't have mouseup events.